Inline links don't work when wrapped onto second line in IE 7 - please help!

[Ali from The Office Diet]

Hi all,

I'm creating a free site for some friends who work with a charity.

When using Internet Explorer 7, the links along the top of the page work fine when they're all on one line, but if the browser window is resized (or if the text size is made larger) so that the links wrap onto a second line, only the links on the second line work.

The ones on the top don't act as links. (Though occasionally, if there's no link directly beneath them, they seem fine.)

Does anyone know what might be causing this? Does anyone know a work-around? I'd be really grateful for help! It's fine in Firefox so I think it's an IE 7 thing...

If you need to see it in action, the site is Micah Mobile Ministries - Home page -- just resize your browser so that the navigation links along the top wrap, and you'll see what I mean!

Many thanks in advance,

Ali

[Niki]

Hey, the problem is that the menu is an inline menu. If you get rid of list (ul and li) then it will work just fine. Only thing you have to do then is align it in the center, and add padding to both sides of your links in your menu.

Peace

[Niki]

Ow, and get rid of the css refering to the li and ul too then. Because you won't need that anymore.

[Ali from The Office Diet]

Thanks Niki, is there no way to do it and keep it as an unordered list, then? I'm going to have to remove the <ul> and <li> tags to get it working in IE7?

Cheers,

Ali

[Blueskied]

I played around with your CSS.
You could try replacing these two sections:

ul#navbar {
display: inline;
list-style-type: none;
padding: 0.3em;
margin: 0.3em;
top: 1em;
left: 12em;
}

ul#navbar li {
float:left;
margin: 0.5em;
padding: 0.3em;
border-right: none;}

Now you need to add a 'clear' in your HTML-Code too:

<div class="header" style="clear:both"><img src="images/MMMheader.bmp" class="head"/></div>

Note: You'll get larger (vertical) spaces between the menu links now. Maybe changing the margins/paddings will help. It's too late, i can't look into it now.

[Ali from The Office Diet]

Karl, that's brilliant, thank you so much! :-) I've got it working now, jiggled around the padding a bit too.

Many many thanks again!

Ali

[Blueskied]

Cool!