[thelist] IE 6 css handling mystery

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