[thelist] IE 6 css handling mystery
Mark Kennedy
mark at eurogamer.net
Wed Mar 12 05:04:43 CST 2003
Hi Joe,
It's all a bit of a mystery, innit? Two things spring immediately to mind:
1) Borders are rendered outside of a content box. So setting height: 100% and
then adding a border makes the box slightly bigger than 100% (2px bigger).
2) If you're trying to get right up flush to the screen edge with your content,
then you also want set cellspacing="0" since that layout property isn't
accessable through CSS1. If you're happy to use CSS2 then take a peek at
border-spacing property, and some others too.
Also, I think you can forget setting box properties for the HTML tag - it
doesn't need them and BODY should always be your top level reference.
BTW, have I missed something or is there really HTML4.02 now?
Mark
P.S. I changed your stylesheet to the following and I got the result I think
you're after:
body {
height: 100%;
margin:0px;
padding: 0px;
text-align:center;
font-family: arial, verdana, sans-serif;
}
.main_table {
height: 100%; width: 100%;
border: none;
background-color: rgb(70%,80%,80%);
vertical-align: top;
text-align: left;
margin: 0px;
padding: 0px;
}
.main_table_cell {
border: 0px solid blue;
height: 100%;
width: 100%;
vertical-align: top;
text-align: left;
margin:0px;
padding: 0px;
}
On Tue, 11 Mar 2003, joe panico wrote:
>In IE 6 on win2k:
>
>the following html:
>
><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.02//EN">
><html>
>
><style>
>
>html { height: 100%; margin:0px 0px 0px 0px; padding: 0px 0px 0px 0px;
>text-align:center; font-family: arial, verdana, sans-serif; }
>
>body { height: 100%; margin:0px 0px 0px 0px; padding: 0px 0px 0px 0px; }
>
>.main_table { height: 100%; width: 100%; border: none; background-color:
>rgb(70%,80%,80%); vertical-align: top; text-align: left; margin:0px 0px 0px
>0px; padding: 0px 0px 0px 0px;}
>.main_table_cell { border: 1px solid blue; height: 100%; width: 100%;
>vertical-align: top; text-align: left; margin:0px 0px 0px 0px; padding: 0px
>0px 0px 0px;}
>
></style>
>
><body>
> <table class="main_table">
> <tr>
> <td class="main_table_cell">
> world
> </td>
> </tr>
> </table>
>
>
> </body>
>
></html>
>
>behaves in a way I don't understand. On Mozilla, the above produces content
>(in particular the main_table_cell) that is always precisely the size of the
>viewport in the vertical direction and there is no vertical scroller. That's
>what I would expect. However, in IE the above produces a main_table_cell that
>is always slightly larger than the viewport in the vertical dimension and a
>vertical scroller is active.
>
>Why does IE do this? Who is right; Moz or IE?
>
>thanks for any pointers,
>
>joe
>
>--
>Open WebMail Project (http://openwebmail.org)
>
>--
>* * Please support the community that supports you. * *
>http://evolt.org/help_support_evolt/
>
>For unsubscribe and other options, including the Tip Harvester
>and archives of thelist go to: http://lists.evolt.org
>Workers of the Web, evolt !
>
More information about the thelist
mailing list