A story about Internet Explorer and the Z-index
There once was a boy who needed to create a multi-level navigation. Now this was no ordinary boy, this was a web developer and he knew that the best way to create a multi-level navigation was to use a technique named suckerfish or even son of suckerfish.
This is a purely CSS technique that is ‘supposed’ to be cross browser compliant. First the boy needed to have his navigation. The idea was to have a standard layout for a navigation, something like this:
<ul id="testnav">
<li><a href="link1.php">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
To create the multi-levels the next level has to be contain within the li of the original list, and repeated for every level beneath it. Like this:
<ul id="testnav">
<li><a href="#">Link 1</a>
<ul>
<li><a href="#">Second Level 1</a></li>
<li><a href="#">Second Level 1</a></li>
<li><a href="#">Second Level 1</a></li>
</ul>
</li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
So far, so good. The boy was really moving but all he had was a navigation that did not look too pretty:
That’s is where Cascading Style Sheets or CSS come into play. Since this boy, had been developing websites for awhile, he knew that the best way to have the navigation look the way he wanted was to use CSS.This is the code he wrote:
#testnav li {
float: left;
position: relative;
list-style-type:none;
}
#testnav li a {
color: #000;
font-family: 'Helvetica Neue';
font-size: 24px;
padding: 5px 25px;
text-decoration: none;
}
#testnav li a:hover {
text-decoration: underline;
}
/* first level or children */
#testnav li ul {
display:none;
padding: 0 10px;
position: absolute;
left: 0;
top: 100%;
}
#testnav li:hover > ul {
display: block;
}
#testnav li ul li {
padding: 5px 0;
}
#testnav li ul li a{
display: block;
width: 170px;
}
#testnav li ul li {
_display: inline; /* for IE6 */
}
Since he was aware that IE6 (ugh!) would not support the :hover attribute on anything else than an anchor tag, he dutifully used jQuery to add some support. But that is for another story…
This story is about the z-index and how anything older than Internet Explorer 8 will not work the way that is expected. In this particular story, the boy had stumbled across a problem that was messing with his navigation. You see the boy had another ‘positioned’ item directly below this navigation. As any good web developer knows that any positioned element, will be assigned a z-index by the browser. The further down the page and element appears the higher z-index it will receive by the browser. So if the z-index is not declared specifically by the style sheets any elements that are below on the page will stack on top of elements above them in the code.
So as expected, the ‘dropdown’ navigation was ‘dropping down’ behind the element that was immediately below the navigation. Making it completely invisible. Since our web developer knew he could declare the z-index in the style sheets and over ride the browsers default order. He did so like this:
#testnav {
z-index: 10000;
}
That should be more than enough to stay on top of everything, and it does on everything except IE7 and later. On IE7- browsers the drop down is still invisible because it hides behind the positioned element beneath it.
That’s fine the developer thought that perhaps the z-index for this element needs to be specifically for these browsers. But …Nope the problem still exists. In desperation the developer thought that maybe a negative value would do the trick and ‘bingo’ that worked!
Summary
In fact, to get this to work correctly all that is needed is to declare a z-index of -1 for the element immediately below the navigation. Not ideal and I would definitely consider this a hack. If you have come across a more elegant solution, I would definitely like to hear about it.
Why does this happen? The way I understand it is that every time an old version of IE comes across a ‘positioned’ element it re-declares ALL the z-indexes on the page. If this is true… that has to rank up there with one of the stupidest IE quirks.
No related posts.
