Menu
I'm having a problem similar to the one described here (without a resolution):
IE7 float and clear on the same element
The following HTML renders as intended in Firefox but not in (both) IE7 and IE8:
<html>
<head>
<style>
ul {
list-style-type: none;
}
li {
clear: both;
padding: 5px;
}
.left {
clear: left;
float: left;
}
.middle {
clear: none;
float: left;
}
.right {
clear: right;
float: left;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li class="left">2</li>
<li class="right">3</li>
<li class="left">4</li>
<li class="middle">5</li>
<li class="right">6</li>
<li>7</li>
</ul>
</body>
</html>
This is a form layout, and in Firefox the results appear like:
1
2 3
4 5 6
7
That's what I'm going for. In IE7 and IE8 however, the results are:
1
2 3 5 6
4
7
[Note: I don't want to float anything to the right because I want the fields on my form to left-align correctly, without a giant space in-between the floated fields to account for the parent container's width.]
Apparently I need a full clear, and can probably add an empty list-item element to the list to force clearing, but that seems like a dumb solution and sort of defeats the purpose.
Any ideas? I've spent a few hours reading and trying different options without success.
721
Try this, demo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>list floats</title>
<style type="text/css">
li{clear: none;list-style: none}
.clearer{float: left; clear: left}
.floater{ float:left}
</style>
</head>
<body>
<ul>
<li class="">1</li>
<li class="clearer">2</li>
<li class="">3</li>
<li class="clearer">4</li>
<li class="floater">5</li>
<li class="">6</li>
<li class="clearer">7</li>
</ul>
</body>
</html>
You can simply use a <br class="clear" /> with a br.clear{ clear: both; }
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
