IE9 CSS Float Problem!

Question

The following page does not display properly in IE 9.

This seems to be the only problem in IE 9.

http://froyo.tv/test/

The list style image is above the image!

IE9

Firefox, Chrome, IE8, ...

EDIT: I know how to fix this! But I want to know what happens with IE9

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

Answer 1

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

• Removing margin-right: 30px on .image .
• Removing width: 500px on .detail (you can add 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/

Answer 2

This is the fix for the problem in IE9:

li {list-style-position: inside;}

I assume that IE9 does not have an "inside" list bullet.

Se fix here:

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

Answer 3

Well, using Chrome, I see custom list images, IE9 does not handle list style. Instead of using it, try the following:
li {background: url (your_image.jpg) in the center on the left;}