Welcome to WebmasterWorld Guest from 3.93.74.227

Forum Moderators: not2easy

Message Too Old, No Replies

CSS puzzle - strange white line

Driving me nuts - any help appreciated

     
9:28 am on Sep 16, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Oct 19, 2004
posts:88
votes: 0


I hope you can help me solve this CSS puzzle. The following HTML and CSS results in a vertical white line (2px wide) between #LeftMenu and #WorkArea in IE6.0. I've tried and tried but cannot get rid of it. Can anyone tell me why this is happening please?

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);
}

9:33 am on Sept 16, 2005 (gmt 0)

Preferred Member

10+ Year Member

joined:Apr 4, 2004
posts:388
votes: 0


Hvae you tried removing *all* the whitespace between the two divs?
9:43 am on Sept 16, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Oct 19, 2004
posts:88
votes: 0


Thanks for your suggestion. I just tried it but no luck.
9:59 am on Sept 16, 2005 (gmt 0)

Full Member

10+ Year Member

joined:Feb 14, 2005
posts:266
votes: 0


Looks similar to IE's 3px text jog to me, although I'm no expert on IE bugs; preferring to avoid them than get to know them ...

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.

10:13 am on Sept 16, 2005 (gmt 0)

Full Member

10+ Year Member

joined:Feb 14, 2005
posts:266
votes: 0


It can be fixed by adding the following to #WorkArea:

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.

12:23 pm on Sept 16, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
posts:2239
votes: 0


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

1:58 pm on Sept 16, 2005 (gmt 0)

Full Member

10+ Year Member

joined:Feb 14, 2005
posts:266
votes: 0


I'd go a slightly different route. I wouldn't mix floated and non floated elements on the same level as each other. I'd find another way of achieving the same look (such as floating both divs in the above example). Why the alarmist approach?

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.

2:27 pm on Sept 16, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Oct 19, 2004
posts:88
votes: 0


I must be misunderstanding this because I get an odd result. I can live without declaring height: 100%;
width: auto; on #WorkArea so I deleted those two lines. But now #LeftMenu disappears, as if covered up by #WorkArea. Also, I put some text into #WorkArea and after a certain number of lines the text shifts to the left, where #LeftMenu should be. I would like to have #LeftMenu extend right to the footer.

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);
}

2:39 pm on Sept 16, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
posts:2239
votes: 0


You need a left margin on #WorkArea equal to the width of the #Menu. That should solve both of the problems you describe.

cEM

2:46 pm on Sept 16, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Oct 19, 2004
posts:88
votes: 0


Uh, oh. margins! I try and avoid margins because of box model problems. but I shall give it a go. Thanks a lot for your reply and to jetboy too.
2:52 pm on Sept 16, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
posts:2239
votes: 0


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