Here is a small test. This should be an easy one.
Here is the HTML code:
<Html>
<Head>
<Style>
Table.LXIFrame
{
Border-Bottom: #444444 1px solid;
Border-Left: #444444 1px solid;
Border-Right: #444444 1px solid;
Border-Top: #444444 1px solid;
Border-Collapse: Collapse;
Font-Family: Arial, Helvetica, sans-serif;
Font-Size: 11px;
Color: #000000;
Background: #FFFFFF;
}
Table.LXIFrame TD
{
Border-Bottom: #CCCCCC 1px solid;
Border-Left: #DDDDDD 1px solid;
Border-Right: #DDDDDD 1px solid;
Border-Top: #CCCCCC 1px solid;
Border-Collapse: Collapse;
Font-Family: Arial;
Font-Size: 12px;
Color: #000000;
}
Table.LXIFrame TH
{
Background: #E6E6E6;
Border-Bottom: #CCCCCC 0px solid;
Border-Left: #CCCCCC 0px solid;
Border-Right: #CCCCCC 0px solid;
Border-Top: #CCCCCC 0px solid;
Font-Family: Arial;
Font-Size: 11px;
Font-Weight: Normal;
Color: #000000;
}
</Style>
</Head>
<body>
<TABLE Class=LXIFrame CELLSPACING=0 CELLPADDING=2>
<TR><TH>Test</TH></TR>
<TR><TD>Test</TD></TR>
</TABLE>
</body>
</Html>This page is for the quirk mode. Load it in the browser and see how the table container one pixel black border is all around the table.
Now, add this at the top:
<!DOCTYPE HTML>
See the reaction of the page where the table container one pixel black border is no longer all around the table. If someone can find a way to obtain the same border in HTML5, that would be appreciated.
