Forum Moderators: not2easy
<!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>
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
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.
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..
