BillyRayPreachersSon
Programmer
I have a problem where IE (at least v5.0, v5.5, and v6.0 on Windows) does not honour "clear:left" when applied to list elements.
Here's my test harness:
The DOCTYPE must remain unchanged. Everything else is fair game.
The page is validating with no errors, and exhibits the expected behaviour in NN v7.0 and FF v1.0.4.
I would expect to see a grid of 3 cols x 3 rows... but in IE, the list simply repeats to the right until it wraps.
I've search on Google for a bit, but can't find any reference to this specific issue.
Does anyone have any ideas about (a) why IE is doing this, and (b) how I could possibly fix this?
Thanks!
Dan
[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
Here's my test harness:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="description" content="Some content">
<title>List Test Page</title>
<style type="text/css">
div#myList ul {
margin: 0px;
padding: 0px;
margin-top: 1em;
margin-bottom: 1em;
float: left;
list-style-type: none;
}
div#myList ul li {
margin: 0px;
padding: 0px;
}
div#myList ul li.cell,
div#myList ul li.break {
float: left;
clear: none;
width: 5em;
margin-right: 0.5em;
background-color: red;
}
div#myList ul li.break {
clear: left;
}
</style>
</head>
<body>
<div id="myList">
<ul>
<li class="cell break">Item 1</li>
<li class="cell">Item 2</li>
<li class="cell">Item 3</li>
<li class="cell break">Item 4</li>
<li class="cell">Item 5</li>
<li class="cell">Item 6</li>
<li class="cell break">Item 7</li>
<li class="cell">Item 8</li>
<li class="cell">Item 9</li>
</ul>
</div>
</body>
</html>
The DOCTYPE must remain unchanged. Everything else is fair game.
The page is validating with no errors, and exhibits the expected behaviour in NN v7.0 and FF v1.0.4.
I would expect to see a grid of 3 cols x 3 rows... but in IE, the list simply repeats to the right until it wraps.
I've search on Google for a bit, but can't find any reference to this specific issue.
Does anyone have any ideas about (a) why IE is doing this, and (b) how I could possibly fix this?
Thanks!
Dan
[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]