homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Browsers show different cell height.
A dilettantish question.

10+ Year Member

Msg#: 5445 posted 6:59 pm on Jan 11, 2005 (gmt 0)

In the case of m0 class IE6 shows height: 45px + border: 7px. Opera8 and Mozilla1.7 show height+border=45px.
In the case of m4 instead 1px height of IE6 shows 5px. Opera8 and Mozilla1.7 show 6px.
What is wrong with the code and how to make the three browsers show the same height?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<STYLE type="text/css">
[b].m0[/b] {color: #512500; border: 7px ridge #512500;
height: 45px;
width: 200px;
font-family: Verdana, Arial;
font-size: 13pt;
font-weight: 700;
line-height: 1;
padding: 0px;
[b].m4[/b] {
width: 200px;
height: 1px;
padding: 0px;
<TR><TD class="[b]m0[/b]"><a href="1">1</a></TD>
<TR class="[b]m4[/b]"><TD></TD></TR>
<TD class="[b]m0[/b]"><a href="2">2</a><br></td>



WebmasterWorld Senior Member 10+ Year Member

Msg#: 5445 posted 7:15 pm on Jan 11, 2005 (gmt 0)

Welcome to Webmasterworld, Lixorer.

You have encountered a classic case of the two differing box models, the W3C standard followed by Opera and Mozilla and the Microsoft proprietary model used by IE 5 and IE6 when it is in "quirks" mode (for instance, triggered by an HTML 4.0 Transitional doctype).

If you need to support IE5 or need to use this doctype, you will need to use one of several methods to deliver different values to IE.

- a CSS box model hack ( [css-discuss.incutio.com...] and [positioniseverything.net...] are good resources )
- using scripting, user-agent testing, IE conditional statements, or a stylesheet import hack to deliver a different stylesheet to IE
- zero out margin, padding, and borders


10+ Year Member

Msg#: 5445 posted 7:45 pm on Jan 12, 2005 (gmt 0)

Thank you for the welcome, choster.

The DOCTYPE posted above triggers Standards mode for at least Opera7 and IE6 according to:

However I tried the Strict DOCTYPE and nothing changed. You gave me good links, thank you. But the cell width renders fine by all three browsers, it's the table cell height that I can't make look equal. It looks like Opera & Mozilla switch to Quirks just for the case of cell height. The support of IE5 is not so important, the code is for a homepage. But I want the support of Opera and Mozilla.


10+ Year Member

Msg#: 5445 posted 11:00 pm on Jan 13, 2005 (gmt 0)

Does anyone know whether this simple table can be made with CSS? If it can't, I'll have to look for another technique.


WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 5445 posted 11:52 pm on Jan 13, 2005 (gmt 0)

Does anyone know whether this simple table can be made with CSS

It's not a simple table ~ it can't be made with HTML either ;)

The "height attribute" is deprecated [w3.org] for table cells, IE is choosing to support it, but the compliant browsers are not applying the height.

you can however make it work with the use of CSS, but it will only work effectively if there is only one line in the table cell (text or image) by using line-height instead of height. So if you want the cell to be 45px high including the 14px (7+7) borders you need to specify a line height of 31px.

WRT the 1px height cell ~ you need to specify this as 1px line-height too.. and possibly the font size may need overriding but only in quirks mode..


10+ Year Member

Msg#: 5445 posted 1:41 pm on Jan 14, 2005 (gmt 0)

Thank you very much! Finally, the table look as it was meant to and the question is clear for me.
I was guided by CSS2 specs. Now this sentence seems to me not to be quite correct.
In CSS2, the height of a cell box is the maximum of the table cell's 'height' property and the minimum height required by the content (MIN). [w3.org]

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved