Controlling Height. IE layout issue...

[Luther]

I'm working on a website that uses a strict, fixed-size layout. There is a simple list-based navigation system on the left, and the main content in an area to the right.

See the test page at: http://www.barberdesign.co.uk/duo/heathrow_express.html

(Link to complete stylesheet: http://www.barberdesign.co.uk/duo/css/duo.css)

CSS in question:

#menu {
position: absolute;
width: 150px;
background-color: #fff;
font-size: 13px;
z-index: 2;
}

ul#nav {
list-style-type: none;
width: 100%;
}

ul#nav li {
height: 15px;
line-height: 15px;
}

To complicate matters, the site area uses a mixture of Flash and HTML, to make the site move the way the client wants, but also be search engine friendly. To do this I've created separate divs to contain the HTML naviagtion, HTML content and Flash navigation/content, and stacked them using z-index with "w-mode: transparent" on the Flash.

The problem I have is getting the list-based menu items to be the same height in all browsers. This is essential because the Flash will be in a fixed position, so if the HTML navigation comes down too low on one browser, it will overlap the Flash on some pages.

At the moment it displays correctly in the modern standards compliant browsers, (Firefox Mac/PC, Opera Mac/PC, IE7, and Safari) but IE6 PC is showing the li's with a larger pixel height dimension, and therefore coming further down the page.

Does anyone know how to force IE to display the li's at the height specified in the stylesheet?!

Thank youuuuuuuuu!

[Luther]

Sorry to bump, but it's a bit of an urgent problem to solve for me, and I'm sure it's a simple one for someone out there with a bit more experience!!

[Paul O'B]

Hi,

If you float the list and anchors for IE then it collapses all the white space bugs.

* html ul#nav li, 
* html ul#nav li a{
float:left;
height:15px;
overflow:hidden;
clear:left
}

That makes it more or less the same as firefox.

[Paul O'B]

BTW you can't use #nav more than once in your page and you should be using a class instead.

[Luther]

Thanks!

Actually before you posted, I found another solution. If I simply remove the "height: 15px;" declaration from the li selector, leaving only "line-height: 15px;", it works!!

I think I will find your method useful in the future, however.

And thanks for the class tip, that'll neated up my stylesheet