The following markup is not something I can change as it’s based on user content. The problem is that in IE9 the bullets in a ul that are next to a floated img appear on the wrong side of the image. This is only a problem in IE9. The way the ul wraps the image is desired behavior and something I’d like to keep but that makes this problem really hard to solve.
Any ideas on how to solve this without changing the markup and in a way that looks good cross-browser?
Fiddle
http://jsfiddle.net/fdHN6/
EDIT : I should have mention this, list-style-position: inside causes the last bullet point which has more than one line of text to align incorrectly which is why that alone is not really a good solution.
<html>
<body>
<div style="width:500px;">
<img src="http://placekitten.com/g/200/303" alt="smelly cat" />
<ul style="margin-left: 10px;">
<li>Mine!</li>
<li>Mine!</li>
<li>Mine!</li>
<li>Mine!</li>
<li>Mine!</li>
<li>Mine!</li>
<li>Mine!</li>
<li>Mine!</li>
<li>Mine!</li>
<li>Mine!</li>
<li>Mine!</li>
<li>Mine!</li>
<li>Mine!</li>
<li>Mine!</li>
<li>Mine!</li>
<li>Mine!</li>
<li>Mine!</li>
<li>Mine!</li>
<li>Mine!</li>
<li>Mine!</li>
<li>Mine!</li>
<li>Mine!</li>
<li>Mine! Mine! Mine! Mine! Mine! Mine! Mine! Mine! Mine! Mine! Mine! Mine! Mine! Mine</li>
</ul>
</div>
</body>
</html>
body{
margin-left:35px;
}
img {
margin:20px;
float:left;
}
ul li {
list-style-type: disc;
}
should solve your issue.
http://jsfiddle.net/fdHN6/1/
UPDATE: Using pseudo-elements you can achieve a similar effect, while preserving the text-indent:
http://jsfiddle.net/fdHN6/3/