Margins on block elements inside table cells?

Hello,

When the example HTML below is viewed on IE 6, "Text" and "Heading" line up.

On Mozilla 1.5, they don't; there's blank space above "Heading".

What is the best way to make Mozilla look like IE?

The only thing that comes to mind is to use something like <h3
style="margin-top: 0"> in place of the first <h3>. But that seems very
dirty. Surely there must be a better way to tell Mozilla "no margin on the
first/last block elements of a table cell", i.e. "behave like IE"?

Thanks,
Todd Parker

--------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<table border="1">
<tr>
<td valign="top">
Text
</td>
<td valign="top">
<h3>Heading</h3>
...
<h3>Heading</h3>
...
</td>
</tr>
</table>
</body>
</html>

On Sun, 2 Nov 2003, Troy Parker wrote:
[color=blue]
> What is the best way to make Mozilla look like IE?[/color]

Since Mozilla mostly follows the specifications, wouldn't it be more
interesting to make IE look like Mozilla?

SCNR

In article <6NydnX12tJcY9TiiRVn-tg@comcast.com> in
comp.infosystems.www.authoring.stylesheets, Troy Parker <no@email>
wrote:[color=blue]
>The only thing that comes to mind is to use something like <h3
>style="margin-top: 0"> in place of the first <h3>. But that seems very
>dirty. Surely there must be a better way to tell Mozilla "no margin on the
>first/last block elements of a table cell", i.e. "behave like IE"?[/color]

There is, and don't call me Shirley. :-)

In your style sheet:
td h3, th h3 { margin-top: 0 }

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

"Stan Brown" <the_stan_brown@fastmail.fm> wrote in message
news:MPG.1a0f711d8c3134d98b696@news.odyssey.net...[color=blue]
> In your style sheet:
> td h3, th h3 { margin-top: 0 }[/color]

Thanks, but this affects *all* the <h3> elements inside the cell. Note that
in my example, there's a second <h3> element in the middle. I still want the
space above that <h3>, just not the unnecessary space at the top of the cell
(or the bottom, if I were to put an <h3> or other block element there).

I'm trying to find a way to avoid having to resort to separate styles for
top/middle/bottom elements just to work around this Mozilla quirk...

Todd

"Alan J. Flavell" <flavell@ph.gla.ac.uk> wrote in message
news:Pine.LNX.4.53.0311022218570.14853@ppepc56.ph. gla.ac.uk...[color=blue]
> Since Mozilla mostly follows the specifications, wouldn't it be more
> interesting to make IE look like Mozilla?[/color]

Sorry but the Mozilla behavior is not the look I want. :)

I want the content of my table cells to be flush to the edges with no
redundant space. I don't want there to be space sometimes and sometimes not,
depending on whether a block element is used inside the cell.

Todd

Troy Parker wrote:
[color=blue]
> <td valign="top">
> <h3>Heading</h3>[/color]

Post an url of the actual page with real data, the code you posted looks
like you are abusing tables for layout.

--
Spartanicus

"Todd Parker" <no@email> wrote:[color=blue]
>"Stan Brown" <the_stan_brown@fastmail.fm> wrote:[color=green]
>>
>> In your style sheet:
>> td h3, th h3 { margin-top: 0 }[/color]
>
>Thanks, but this affects *all* the <h3> elements inside the cell. Note that
>in my example, there's a second <h3> element in the middle. I still want the
>space above that <h3>, just not the unnecessary space at the top of the cell
>(or the bottom, if I were to put an <h3> or other block element there).
>
>I'm trying to find a way to avoid having to resort to separate styles for
>top/middle/bottom elements just to work around this Mozilla quirk...[/color]

The first H3 inside any cell can be selected by the following:

td h3:first-child, td h3:first-child {margin-top: 0;}

Not supported by IE, but as IE seems to be giving you the style you
want anyway (through either a bug or a different default value) that's
not a problem in this case.

In CSS3 there will be a last-child selector as well, but as that's
still some way off I wouldn't expect any browser support for the time
being.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>

In article Troy Parker wrote:[color=blue]
> Hello,
>
> When the example HTML below is viewed on IE 6, "Text" and "Heading" line up.
>
> On Mozilla 1.5, they don't; there's blank space above "Heading".
>
> What is the best way to make Mozilla look like IE?[/color]

Not using table layout.
[color=blue]
> The only thing that comes to mind is to use something like <h3
> style="margin-top: 0"> in place of the first <h3>. But that seems very
> dirty. Surely there must be a better way to tell Mozilla "no margin on the
> first/last block elements of a table cell", i.e. "behave like IE"?[/color]

well, of course you can say
td *:first-child {margin-top:0}

That would also match inline elements, but wouldn't break anything

IIRC, IE thinks there isn't margin on top of headings, and mozilla thinks
there is by default. Or was that with paragraphs. Maybe it is both.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

"Steve Pugh" <steve@pugh.net> wrote in message
news:6e6cqv0alg6rfgc95h8h1mhb3dqujltq19@4ax.com...[color=blue]
> The first H3 inside any cell can be selected by the following:
>
> td h3:first-child, td h3:first-child {margin-top: 0;}[/color]

Beautiful! That appears to be exactly what I've been searching for.
[color=blue]
> In CSS3 there will be a last-child selector as well, but as that's
> still some way off I wouldn't expect any browser support for the time
> being.[/color]

Okay, I can live with that. My main issue was getting stuff at the top to
line up horizontally. Extra space at the bottom isn't so noticable since my
table actually doesn't have a border.

Thanks Steve, and to everyone else who replied.

Todd

Troy Parker a écrit:
[color=blue]
> Hello,
>
> When the example HTML below is viewed on IE 6, "Text" and "Heading" line
> up.
>
> On Mozilla 1.5, they don't; there's blank space above "Heading".
>
> What is the best way to make Mozilla look like IE?
>
> The only thing that comes to mind is to use something like <h3
> style="margin-top: 0"> in place of the first <h3>. But that seems very
> dirty. Surely there must be a better way to tell Mozilla "no margin on the
> first/last block elements of a table cell", i.e. "behave like IE"?
>
> Thanks,
> Todd Parker
>
> --------------------------------------------------------------
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html>
> <body>
> <table border="1">
> <tr>
> <td valign="top">
> Text
> </td>
> <td valign="top">
> <h3>Heading</h3>
> ...
> <h3>Heading</h3>
> ...
> </td>
> </tr>
> </table>
> </body>
> </html>[/color]

Also, if your DOCTYPE header is XHTML and your code is not (like here)
mozilla ang konqueror display a different rendering; actually, they do not
render well.

I do not know for iexplore.

Bonne chance!

--
Marc Nadeau
La Pagerie
http://www.pagerie.com

Margins on block elements inside table cells?

re: Margins on block elements inside table cells?

re: Margins on block elements inside table cells?

re: Margins on block elements inside table cells?

re: Margins on block elements inside table cells?

re: Margins on block elements inside table cells?

re: Margins on block elements inside table cells?

re: Margins on block elements inside table cells?

re: Margins on block elements inside table cells?

re: Margins on block elements inside table cells?

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about