An ul list against a float:left is giving me serious headache in IE 9. It worked fine in IE 7 and IE 8, and now it doesn’t. I’ve tried to change the doc type to no avail. If I leave the doctype out of it, it works fine….. but that’s not the way to go.
The following example will put the bulletpoints over the yellow area in IE 9. Any pointers at all?
Here’s my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
body{
background-color:grey;
}
.somewrapper{
width:500px;
background-color:white;
float:left;
}
.imagewrapper{
float:left;
width:180px;
height:140px;
margin-right:30px;
background-color:yellow;
}
ul{
margin:0px;
padding:0px;
margin-left:25px;
}
ul li{
list-style:disc outside none;
}
</style>
</head>
<body>
<div class="somewrapper">
<div class="imagewrapper">
</div>
<div class="teste">
<h2>asdklfjaøskljf</h2>
<ul>
<li>aøsklfjaøs jasas fasfklf aaasfasasfa sfasfsdfasfas fasf asfasfasfasfasf asf as fasføsjklf</li>
<li>aøsklfjaøsjklfaøsjklf</li>
<li>aøsklfjaøsjklfaøsjklf</li>
<li>aøsklfjaøsjklfaøsjklf</li>
<li>aøsklfjaøsjklfaøsjklf</li>
<li>aøsklfjaøsjklfaøsjklf</li>
</ul>
<h2>asdfasfasfasdfasf</h2>
<p>asdfasfasfaskjf aklsjf asjklf askljf </p>
<ul>
<li>aøsklfjaøsjklfaøsjklf</li>
<li>aøsklfjaøsjklfaøsjklf</li>
<li>aøsklfjaøsjklfaøsjklf</li>
<li>aøsklfjaøsjklfaøsjklf</li>
<li>aøsklfjaøsjklfaøsjklf</li>
<li>aøsklfjaøsjklfaøsjklf</li>
<li>aøsklfjaøsjklfaøsjklf</li>
<li>aøsklfjaøsjklfaøsjklf</li>
<li>aøsklfjaøsjklfaøsjklf</li>
</ul>
<h2>asdfasfasfasdfasf</h2>
<p>asdfasfasfaskjf aklsjf asjklf askljf </p>
</div>
</div>
</body>
By adding overflow:hidden, and then some padding tweaking I solved the most worst part. It wont flow completely around, but it will work good enough!
So overflow:hidden is the answer.