CSS Horizontal Menu Problem: Won't Work in IE7

Question

Could you help me fix the menu on this this page? The menu list items don't have a width defined, so they display at 100% width in IE7. If I make the span.right have a float: left, it fixes the problem, but then the rounded corners don't work. A possible solution might be to get rid of the right span and set a padding and background image to the anchor, but that will: a) prevent me from being able use to a background image on the anchor (for this instance, I suppose a solid color will do) and b) require that I break menu.png into separate image files.

If you guys have any good suggestions, let me know. Thanks!

Answer 1

If you move the actual text to the middle, between <span class="left"></span> and <span class="right"></span>, and encompass it in <span> tags:

<li><a href="#">
    <span class="left"></span>
    <span>Home</span>
    <span class="right"></span>
</a></li>

You can then add the CSS rule:

#menu ul li a span
{
    float: left;
}

Then remove float: left; from span.left and span.right. This should work fine on both Firefox and IE 7, and I'm assuming most other browsers too. Of course, this will only work if you're OK with restructuring the HTML a little.