Welcome to WebmasterWorld Guest from 54.166.102.61

Forum Moderators: not2easy

Browsers show different cell height.

A dilettantish question.

   
6:59 pm on Jan 11, 2005 (gmt 0)

10+ Year Member



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">
<HTML><HEAD><TITLE>temp</TITLE>
<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;
}
</STYLE>
</HEAD><BODY>
<TABLE>
<TR><TD class="[b]m0[/b]"><a href="1">1</a></TD>
</TR>
<TR class="[b]m4[/b]"><TD></TD></TR>
<TR>
<TD class="[b]m0[/b]"><a href="2">2</a><br></td>
</TR>
</TABLE>
</BODY> </HTML>
7:15 pm on Jan 11, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

7:45 pm on Jan 12, 2005 (gmt 0)

10+ Year Member



Thank you for the welcome, choster.

The DOCTYPE posted above triggers Standards mode for at least Opera7 and IE6 according to:
[opera.com...]
[msdn.microsoft.com...]

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.

11:00 pm on Jan 13, 2005 (gmt 0)

10+ Year Member



Does anyone know whether this simple table can be made with CSS? If it can't, I'll have to look for another technique.
11:52 pm on Jan 13, 2005 (gmt 0)

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



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

1:41 pm on Jan 14, 2005 (gmt 0)

10+ Year Member



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]
 

Featured Threads

Hot Threads This Week

Hot Threads This Month