views:

1153

answers:

2

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!

A: 

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.

Samir Talwar
That messes up the rounded corners (as I said in my post): http://www.efficientcode.com/p/menu2.html
A: 

Any ideas?

You haven't put the <span> tags around the link text in menu2 as Samir suggested...
Stobor
I did for the home link. I'll do it for the rest.
Even for the home link, you're missing the <span>Home</span> part...
Stobor
Oh, sorry. Missed that.
No probs. Took me a minute to figure out what was going on...
Stobor