Stacking order issue

[bydesign]

I have a problem with Internet Explorer 6 + 7 and stacking order which I can't seem to remedy. Works fine in Safari, Firefox, IE8

The issue is the navigation drop-downs in div#header that are overlapped by the background image on an image-replaced h2 (I'd prefer Cufon but am not paid enough to re-do the titles…). I'd also like to learn what I've done wrong here - if anyone can pitch in I'd be really grateful.

Here's the URL: www.mslexia.co.uk

The navigation ul#mainnav (float:left) is contained in div#header (position: relative). The list items (ul#mainnav li) are set to z-index 10.

The issue is the overlap of the drop-down (ul#mainnav li ul) which seems to happily overlap the div#content below - but NOT for the RESOURCES drop-down which gets hidden by the h2.title background image (css below).

div#main_content h2.title {
position:relative;
width: 400px;
height: 50px;
padding: 0;
margin: 0;
z-index:2
}

div#main_content h2.title span {
position: absolute;
width: 100%;
height: 100%;
background-repeat: no-repeat;
z-index:2
}

I've tried adding a high z-index to header, as I know there's an issue with IE6 + 7 setting z-index 0 to relatively positioned things - no joy.

[Fang]

Just reduce the width of .title to about 250px, the actual image content.

[bydesign]

Guessing this might be the simplest, non-hacking solution…

I made the images long to cater for longer titles. The maximum length h2 image just cuts in before the drop-down - I'll make it the maximum length.