Ie7 And Ie8: Float Clearing Without Adding Empty Elements
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
Solution 1:
Try this, demo:
<!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>list floats</title><styletype="text/css">li{clear: none;list-style: none}
.clearer{float: left; clear: left}
.floater{ float:left}
</style></head><body><ul><liclass="">1</li><liclass="clearer">2</li><liclass="">3</li><liclass="clearer">4</li><liclass="floater">5</li><liclass="">6</li><liclass="clearer">7</li></ul></body></html>
Solution 2:
You can simply use a <br class="clear" />
with a br.clear{ clear: both; }
Solution 3:
I sort of agree with the table option. But, you can do it with an empty list item. This would let you get rid of the 'clear' attribute in the 'right' and 'middle' classes. You would also need a 'solo' class for the single item to be sure it clears both ways.
.clear {
clear: both;
margin:0px;
padding:0px ;
font-size:1px;
}
.solo {
clear: both;
}
<liclass="solo">1</li><liclass="left">2</li><liclass="right">3</li><liclass="clear"></li>
Solution 4:
try following code. much simpler but a little hard to understand!
<!DOCTYPE html><html><head><styletype="text/css">li{list-style: none}
.float{ float:left}
</style></head><body><ul><liclass="">1</li><liclass="float">2</li><liclass="">3</li><liclass="float">4</li><liclass="float">5</li><liclass="">6</li><liclass="float">7</li></ul></body></html>
Post a Comment for "Ie7 And Ie8: Float Clearing Without Adding Empty Elements"