Absolutely positioned element disappears behind floating element in IE7

[Banfa]

This page contains a cut down version of this page.

They both display the same problem, when the menu at the top is dropped down in IE7 the menu (which is positioned absolutely) disappears behind the floated items in the main content below it. (the second page is really given to show the context otherwise the display choices in the first page would appear slight odd).

The pages both work fine in FF 3 and Opera 9.5 (and FF 2 if memory serves me right) and both validate (HTML and CSS).


Is there a solution to this problem, other than redesigning the menu not to use floating items?

[drhowarddrfine]

I don't have IE with me. It's probably one of three IE bugs. Try adding 'position:relative' to one of the two divs, forgot which one. If that doesn't do it, try adding 'height:1%' to the parent div. If that doesn't work, I'd have to look up the 3rd one.

Actually, this is a common IE problem but I never remember the fix off the top of my head.

[Banfa]

Thanks for the reply Doc, I tried those solutions but rather than make IE work they caused FF to stop working (in fact act in exactly the same way as IE).

However I cam up with the fix after a little digging and thought and discussion with work colleagues.

This can all be fixed with z-index I believe. However it is important to note that IE interprets z-index in a different way to all the other browsers. For all the other browsers z-index is absolute, An element with a z-index of 20 always appears above an item with a z-index of 10. In IE z-index is relative what is import is not the z-index of the element you are concerned with but the z-index of element that contains the element you are concerned with that has a sibling that contains the interfering element.

Take a simple example DOM

[html]
<div id="D1">
<div id="D11">
</div>
</div>
<div id="D2">
<div id="D21">
</div>
</div>
[/html]

Assume there is some positioning that causes D11 to occupy the same screen space as D21. If you want D11 to appear on top of D21 then in FF and Opera the z-index of D11 must be higher than the z-index of D21. However in IE this doe not work to get D11 on top of D21 in IE you need the z-index of D1 to be greater than the z-index of D2.

Without this extra z-indexing IE ignores the z-index of D11 being greater than the z-index of D21 because at the level where the elements in question have containing elements that are siblings the element containing D11 is low in the z-index than the element containing D21.

[drhowarddrfine]

I didn't get to look up the 3rd option I mentioned above but mentioning z-index makes me think that was the 3rd option. It's all 'haslayout' related.