homepage Welcome to WebmasterWorld Guest from 54.161.175.231
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.
Lixorer




msg:1180270
 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">
<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>

 

choster




msg:1180271
 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

Lixorer




msg:1180272
 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:
[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.

Lixorer




msg:1180273
 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.

SuzyUK




msg:1180274
 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..

Lixorer




msg:1180275
 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