Width of li with two floats different in IE, correct in FF

Question

I've worked out most of the kinks with my "lava-lamp" effect that I'm trying to create. Basically I want two curly braces (both are images) to wrap a list-item, then follow over to the next list-item. I always build in FF, then make exceptions for IE. I can't figure out what exception I need to make!

I'm using an absolutely positioned li that contains two div's. The first div is floated left, the second is floated right. The width of the li is set to the width of the li it supposed to be wrapping. Thus creating the effect of the braces on the left and right sides of the text. It works beautifully in Firefox, but IE has two issues:

1. The bottoms of the images are cut off. Sometimes they reappear when the animation ends, sometimes they don't. I assume this has to do with height, but no matter what I set the height to, it fails!
2. The width is completely wrong.

Here's a live example of it: http://jsbin.com/odome/2

The left position in IE is always 5-7px more than in FF, but that's a small difference. I'm more concerned with the width and the bottoms of the images being trimmed.

Thanks, as always, for the help!

Answer 1

You should use a CSS reset to make lists behave cross-browser.

Answer 2

1) your ul#selection-test is not properly "cleared"

2) it doesn't seem like you want your li to wrap, so add a white-space: nowrap

3) Opinion: I don't know how I feel about using li#blob as the lava in your lamp. If it was me I would do something like this

<div id="menu">
  <ul id="selection-test">
    <li>Menu Item One</li>
    <li>Menu Item Two</li>
    <li>Menu Item Three</li>
  </ul>
  <div id="lava">
    <div id="lava-left"></div>
    <div id="lava-right"></div>
  </div>
</div>