Problem:
You have a dropdown menu in the header. In Internet Explorer, the dropdown submenu is hidden underneath the container div.
Solution:
Put this in your CSS.
- Code: Select all
/* Fix for IE and it's z-index issue */
#header .inside {
z-index: 1;
}
Why does it work now?
The default Typolight template generates this structure:
- Code: Select all
<div id="header">
<div class="inside">
<div id="menu">The menu is placed here...</div>
</div>
</div>
<div id="container">
The content...
</div>
Both the header inside and container div have position: relative. If there is multiple position:relative divs in your structure, then IE uses separate z layer contexts for each one, which ignore each other.
Our fix makes the header always on top of the container, thus making the container not hiding the dropdown menu.
More info:
http://verens.com/archives/2005/07/15/ie-z-index-bug/
