How to work around IE6/IE7 margins disappearing when relatively-positioned floated div is moved with jquery .hover()?

Question

Here is my code:

http://jsbin.com/uhera3/edit

When I use jQuery to .hover(), the relatively positioned floated divs jump to the left (seemingly losing their margins) in IE7.

Any ideas how to fix this?

Answer 1

I'd suggest implementing IE conditional tags and making an ie-fix.css file.