Main Page Content
MSIE6 bug with floating divs and spacers
Rated 4.24 (Ratings: 9) (Add your rating)
Log in to add a comment
(28 comments so far)
Raphaël Mazoyer
User since: November 21, 2001
Last login: May 20, 2007
Articles written: 4
Microsoft Internet Explorer 6 running on a Windows system has a very annoying display bug when rendering an HTML page that uses Cascading Style Sheets to define divs as floating and adding a spacer div at the bottom with the setting clear: both attribute. If you've been using Marc Newhouse's great Practical CSS column, this may have affected you already...
The problem
Consider the following style sheet:
.spacer {
clear: both;
}
.container {
border: 1px #999 dashed;
}
.item {
float: left;
background-color: #ccc;
padding: 5px;
margin: 5px;
}
.main {
}
.main2 {
background-color: #eee;
}
And the following HTML file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<div class="main">
<h1>Title of the page</h1>
<div class="container">
<div class="spacer"> </div>
<div class="item">One</div>
<div class="item">Two<br/>bis</div>
<div class="item">Three</div>
<div class="spacer"> </div>
</div>
</div>
</body>
</html>
... which validates as XHTML and CSS.
View it in any CSS-compliant browser, you'll see the same results (see screenshot).
Now consider another HTML file, identical to the first one, with the exception that the first div is set to the class .main2. The only difference is that its background-color attribute is set. When I look at it with IE6/Win2k, I don't see "Title of the page", it just isn't visible. Space is reserved for it, but the words aren't there. If you don't have IE6/win, see this screenshot.
OK, we've seen the reason. Now let's see some weird behavior: scrolling. When you scroll down then back up your affected page, the display is properly redrawn! Try it for yourself on the second example, or see this screenshot. (Note: the actual files differ from the code above, as I've added some <br>s to allow you to scroll easily. It does not otherwise affect the demonstration.)
The solution
Brian G. Vallelunga has provided me with the fix: explicitly set the position attribute of paragraphs to relative. Practically, add the following rule to your style sheet:
h1, h2, h3, h4, h5, h6, p {
position: relative;
}
See it in action, the way it should be (note the different CSS file). It still validates as XHTML and CSS, but I'm not sure how respectful it is of the spirit of the thing: feel free to contribute comment if you have some insight in this matter!!
But yes, it's that simple :-)
