IE Popup Bug

CSS popups cause problems with z-index in IE

[trs2988]

What I have is a page showing features/prices for different hosting packages. It has a table (bah, shoot me), and in the first column are the features. When you hover over the features, a CSS popup is supposed to display with details. This works fine in Firefox, but I'm getting strange results in Internet Explorer. Any more links that are below the link being overed show through the popup, like they have a higher z-index.

I'm also quite new to CSS, so you'll have to work with me if my code is a little sloppy.

Here's a sample of the HTML:

<table class=packages>
<tr><th colspan=5 class=header>Basic Information
<tr class=packagerow><th>Feature<th>Package 1<th>Package 2<th>Package 3<th>Package 4
<tr><td><a href=#>Operating System<span>[description edited for space]</span></a><td>Fedora Core 2<td>Fedora Core 2<td>Fedora Core 2<td>Fedora Core 2
<tr><td><a href=#>File Space<span>[description edited for space]</span></a><td>75 MB<td>250 MB<td>1000 MB<td>2000 MB

Here's the associated CSS:

table.packages td a { position: relative; }
table.packages td a:hover { margin: 0em; }
table.packages td a:hover span {
color: black;
background: white;
display: block;
padding: 3px;
border: 2px solid black;
position: absolute;
top: 20px;
left: 0px;
width: 250px;
text-align: justify;
font-size: 8pt;
z-index: 999;
}
table.packages td a span { display: none; }
table.packages td a span:hover { display: none; }

[snip]

I did a lot of searching for this on Google. I found a couple mentions of the bug, but I couldn't find a solution. This might be because its hard for me to sum up this problem in a short phrase.

Anyway, help would be appreciated. Thanks.

[edit: no urls, please. See CSS Forum Charter [webmasterworld.com] for details.]

[edited by: createErrorMsg at 2:38 am (utc) on Aug. 6, 2005]

[SuzyUK]

Hi trs2988 and Welcome to WebmasterWorld!

Not sure that it's a bug as such, or just a literal interpretation of the stacking order. It seems that IE is doing the right thing.. by putting position relative on the <a> element (wih no z-index) every other element after that "in the flow" is appearing on an higher z-index. The span is popping up on the same z-index plane as the link it is contained in so the following link (next cell) is appearing higher correctly(?)

Anyways the z-index on the span is not doing anything because you can only apply z-index to a relative or absolutley positioned element which the span isn't ;)

A Fix..

set the position: relative; and the z-index (though it works without it) onto the a:hover pseudo element and remove the z-index from the span

e.g.

table.packages td a { }
table.packages td a:hover {
margin: 0em; 
position: relative; 
z-index: 999; /* though it works without this too */
}

try that see how it goes and let us know

Suzy

[trs2988]

Thank you! It now works in both of the browsers. I can see I still have a lot to learn about CSS. Once again, thanks for your help.