horizontal submenu drop appearing below right column in IE

I think it is so my first suggestion is to try changing the placement of the z-index value

#menu li {position: relative;}

to

#menu li {
position: relative;
z-index: 500;
}

also there is an error at the end of that code, but it's possibly just a typo and not sure it relates to this anyway.

#contentindex {margin-left:169px; margin-right:169px; margin-top: 50px; }

</style>

if the first suggestion doesn't help, is the right column (where the menu is dropping behind) an iframe or is it absolutely positioned..?

z-index tweaking should help, except if it's an iframe, but as it's working in FF I'm guessing no iframes

Suzy

Hi Helen,
do I recognise my own menu/code? ;)

I donīt know, its from an tutorial "Tutorials provided by Claire" and I changed it to 100% width and 2 levels so it changed a lot.

I tried to put z-index: 500; everywhere and nothing still the same.
The right column is absolute.
Here is the relevant css for the page layout:
#container
{
position:relative; min-width:775px; height:inherit; width: 100%;
margin: 0px 10px 10px 10px auto;
}
#leftindex { position:absolute; top:230px; left:2; width:155px; height:100%; }
#top {
height: 115px; white-space: nowrap;
}
#contentindex {margin-left:184px; margin-right:154px; margin-top: 55px; padding-left:10px;
}

html>body div#Central { margin-left:186px; margin-right:156px; }
div#derecha { position:absolute; top:230px; right:0; width:170px; height:100%; padding-right:3px;}

The only impossibility with this (and other CSS) menu code is to get it to appear over the top of an iframe in FF, Opera, so this should be fixable.

It will be a z-index, stacking order issue because of the absolute positioning of the right column.. however without the HTML I cannot reproduce exactly which stacking context you have.

Try changing (from your original post) the

#menu li {position: relative;}

to

#menu li:[b]hover[/b] {
position: relative;
z-index: 500;
}

also remove the z-index from:

#menu ul ul {
position: absolute;
z-index: 500;
width: 100%;
}

and you could try adding a low z-index to the right div (derecha?) ~ although I think that might cause FF problems even if it works in IE :o

if that doesn't help then post a bare-bones example of your HTML markup, i.e. the order that the container, content, left, right and menu divs are marked up/nested in, please.

IE treats relative/absolute positioning differently than FF

Suzy
aka Claire

I just discovered that in FF when mouseover the submenus where I mouse over blinks once, disappears than appears again.
On your menu that donīt happen.

and many thanks for letting me know about the FF flicker thing.. I'll try to remember that now too ;)

I think the

li:hover 

Happy New Year!

Suzy