Forum Moderators: not2easy
HTML
====
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="new.css" rel="stylesheet" type="text/css">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="Header"><p>Header</p></div>
<div id="LeftMenu"><p>Menu</p></div>
<div id="WorkArea"><p>Work area</p></div>
<div id="CopyrightLayer">
<p>Copyright area</p>
</div>
</body>
</html>
CSS
===
body * {
margin: 0px;
padding: 0px;
border: 0px dashed #000;
}
body {
text-align:left;
font-family:Arial,Sans-serif;
font-size: 12px;
font-weight:normal;
height:100%;
width:100%;
}
#Header {
position:relative; top: 0px; left: 0px;
margin: 0px;
padding: 0px 0px 0px 0px;
height: 130px;
width: 100%;
background: RGB(195,255,200);
}
#LeftMenu {
position:relative; top: 0px; left: 0px;
float:left;
margin: 0px;
padding: 0px;
height: 100%;
width: 150px;
background: RGB(180,255,220);
}
#WorkArea {
position:relative; top: 0px; left: 0px;
margin: 0px;
padding: 0px;
height: 100%;
width: auto;
background: RGB(160,255,220);
}
#CopyrightLayer {
position: relative; top: 0px; left: 0px;
margin: 0px;
padding: 0px;
height: auto;
width: 100%;
background: RGB(195,255,200);
}
In this case it's triggered by the 100% height on #WorkArea.
Edit: It's not a white line as such BTW, it's the background showing through between #WorkArea and LeftMenu.
width: 100%;
margin-left: -160px; /* As wide or wider than #LeftMenu */
float: right;
swapping the order of #WorkArea and #LeftMenu in the source.
and pushing all elements in #WorkArea out from underneath #LeftMenu with 150px left margin or similar.
it's triggered by the 100% height on #WorkArea.
This is correct. However, it's not the 3px Text Jog. It's IE's funky float model, which is activated anytime you place an element with a dimension (width or height) adjacent to a float. If the div has no dimension, IE uses the normal float model, where the non-floated element slides up underneath the floated one. Although it's text won't be covered by the float, the actual block level element is overlapped. The IE float model gets this wrong. Instead, it starts the non-floated element NEXT to the float and extends it from there.
The best answer is to avoid this scenario altogether by not declaring a dimension on a float adjacent element. That height:100% doesn't work in compliant browsers anyway. If you MUST declare it, jetboy has given you the answer...if both divs are floated the problem doesn't occur (the rules for two adjacent floats are different than those for one float and one non-float).
cEM
I should preface this by saying that I don't tend to use left and right borders, and definitely don't use padding on a dimensioned element, using undimensioned nested 'padding divs' to sidestep box model problems. As such I can safely apply a 100% width to every other div without incurring IEs box model wrath.
Why such an idiosyncratic way of working? It's because IE is so much more predictable when you dimension every element. Fixes to IE bugs invariably involve adding a dimension to an element (via the Holly Hack or similar) or changing the display type to something where dimensions aren't used in the same manner. Checkout posts on IE's haslayout property for more on this.
When you're doing proof of concept layouts or CSS examples it isn't obvious just how much trouble you're storing up by not dimensioning elements. Build complex real world sites in pure CSS and you hit IE bugs daily. Dimension everything and you can avoid the majority of them.
Now I could just apply the Holly Hack to pretty much everything, but all I'd be doing is exploiting another IE bug to band-aid the first. This way I go a small way towards bringing IE into line, without resorting to traditional IE hackery.
The exceptions are the aforementioned 'padding divs', which get a height: 0; attribute in an IE specific stylesheet to force layout.
Thanks for your help so far. Latest CSS and HTML to try is pasted below if you wish.
HTML
====
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="new.css" rel="stylesheet" type="text/css">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="Header"><p>Header</p></div>
<div id="LeftMenu"><p>Left Menu</p>
<div id="msgbox">
<p>msgbox</p>
</div>
</div>
<div id="WorkArea"><p>Work area</p>
<p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p>
<p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p>
<p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p>
<p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p>
<p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p><p>TEXT</p>
</div>
<div id="CopyrightLayer"><p>Copyright area</p></div>
</body>
</html>
CSS
====
body * {
margin: 0px;
padding: 0px;
border: 0px dashed #000;
}
body {
text-align:left;
font-family:Arial,Sans-serif;
font-size: 12px;
font-weight:normal;
height:100%;
width:100%;
}
#Header {
position:relative; top: 0px; left: 0px;
margin: 0px;
padding: 0px 0px 0px 0px;
height: 130px;
width: 100%;
background: RGB(195,255,200);
}
#LeftMenu {
position:relative; top: 0px; left: 0px;
float:left;
margin: 0px;
padding: 0px;
height: 100%;
width: 150px;
background: RGB(100,255,220);
}
#WorkArea {
position:relative; top: 0px; left: 0px;
margin: 0px;
padding: 0px;
background: RGB(160,255,220);
}
#CopyrightLayer {
position: relative; top: 0px; left: 0px;
margin: 0px;
padding: 0px;
height: auto;
width: 100%;
background: RGB(195,255,200);
}
cEM
I try and avoid margins because of box model problems.
Actually, margins are treated the same by both box models. In both Standards and Quirks, margins are tacked onto the outside of the box. As long as there is no explicit width on the element, adding a margin will not cause box model problems. (Width defaults to auto. Browsers calculate auto width by applying margins, borders and padding first, and then using the space that remains for the content width.)
cEM
