IE 9 CSS Float problem!

Question

The following web page is not showing properly in IE 9.

It seems to be only a problem in IE 9.

http://froyo.tv/test/

the list-style-image are over the image!

IE9

Firefox, Chrome, IE8, ...

EDIT: I know how to fix it! But I want to know what is really going on with IE9

Fixed: http://froyo.tv/test/index_fix.php

Solution 1

I'm not sure why IE9 is behaving differently, but you can fix it to work consistently by:

• Removing margin-right: 30px on .image.
• Removing width: 500px on .detail (you may wish to add back a smaller width)
• Adding float: left to .detail.

---

Here's a simple reproduction of the problem.

• Broken: http://jsfiddle.net/Nh3kf/
• Fixed: http://jsfiddle.net/Nh3kf/1/

Solution 2

This is a fix for the problem in IE9:

li{list-style-position: inside;}

I guess that IE9 doesn't have the list bullets "inside".

Se the fix here:

http://jsfiddle.net/Nh3kf/40/