By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,396 Members | 1,869 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,396 IT Pros & Developers. It's quick & easy.

Margins on block elements inside table cells?

P: n/a
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>
Jul 20 '05 #1
Share this Question
Share on Google+
9 Replies


P: n/a
On Sun, 2 Nov 2003, Troy Parker wrote:
What is the best way to make Mozilla look like IE?


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

SCNR
Jul 20 '05 #2

P: n/a
In article <6N********************@comcast.com> in
comp.infosystems.www.authoring.stylesheets, Troy Parker <no@email>
wrote:
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"?


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/
Jul 20 '05 #3

P: n/a
"Stan Brown" <th************@fastmail.fm> wrote in message
news:MP***********************@news.odyssey.net...
In your style sheet:
td h3, th h3 { margin-top: 0 }


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
Jul 20 '05 #4

P: n/a
"Alan J. Flavell" <fl*****@ph.gla.ac.uk> wrote in message
news:Pi*******************************@ppepc56.ph. gla.ac.uk...
Since Mozilla mostly follows the specifications, wouldn't it be more
interesting to make IE look like Mozilla?


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
Jul 20 '05 #5

P: n/a
Troy Parker wrote:
<td valign="top">
<h3>Heading</h3>


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

--
Spartanicus
Jul 20 '05 #6

P: n/a
"Todd Parker" <no@email> wrote:
"Stan Brown" <th************@fastmail.fm> wrote:

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


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...


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 <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #7

P: n/a
In article Troy Parker wrote:
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?
Not using table layout.
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"?


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.

Jul 20 '05 #8

P: n/a
"Steve Pugh" <st***@pugh.net> wrote in message
news:6e********************************@4ax.com...
The first H3 inside any cell can be selected by the following:

td h3:first-child, td h3:first-child {margin-top: 0;}
Beautiful! That appears to be exactly what I've been searching for.
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.


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
Jul 20 '05 #9

P: n/a
Troy Parker a écrit:
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>


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

Jul 20 '05 #10

This discussion thread is closed

Replies have been disabled for this discussion.