Link list problem in IE

Hi,

I'm tearing my hair out at the moment trying to fix a cross-browser issue. The page in question is:

http://www.clickedon.net/winetaste

It displays as intended in Firefox, but the navigation bar is broken in IE. I've tried applying padding to #navlist ul, but the navigation bar tends to display too much padding, regardless of how little I declare.

I suspect it's down to IE's poor box model handling, but does anyone have any idea how it could be solved (preferably hack-free)?#

TIA.

I'm afraid I'm on a Mac and don't have access to my PC until Sunday. If you could provide me with a screenshot of what it looks like in IE, I may be able to help.

An IE screenshot can be found at http://www.clickedon.net/winetaste/ie.jpg
There's an unwanted gap between the header image and nav, and the nav DIV doesn't seem to stretch to the height of the LIs.

Hi Geoff,

I've removed the line - any other ideas as to the cause?

Your styles, clear: left and clear: right on the first and last li serve no purpose, they can go.

Take the display: block out of the navcontainer definition as div's are by default bloack elements and put it in your a: definition as this wil make them active for the full width of the li containing them.

Give the navcontainer a position: relative. No need for aany actual positional info. Your just defining an anchor so to to speak for the li's it contains.

Float your li's left with suitable left margin on the first one to position the start of the links.

Give your navcontainer a suitable height.

Then lets see where we are.