Forum Moderators: not2easy

Message Too Old, No Replies

z-index bug in ie6 - :hover span popup doesn't cover a <select>

         

lavazza

7:22 am on Jul 21, 2008 (gmt 0)

10+ Year Member



Hi all,

Once again, I have been a-Googling in vain...

I have seen for myself that IE6 does handle z-index... on certain elements (e.g paragraphs that 'overlap' via padding)... something to with stack levels...

Anyhoo... try as I might, I have no idea how to make the popup appear 'over' a <select>

So, now I have my fingers crossed... hoping that the WebmasterWorld CSS gurus can/will help

Thanks in advance

Cheers
lavazza

Validated html and css

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-GB">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ie6 z index bug</title>
<style type="text/css">
<!--
a.popup {
position:relative; /* this HAS to be relative */
z-index:3;
background-color:#ccc;
color:#000;
}
a.popup:hover {
z-index:4;
background-color:#0f0;
}
a.popup span {
display: none;
}
a.popup:hover span {
display:block;
position:absolute;
top:1.5em;
left:0.5em;
width:7em;
border:3px solid #f00;
background-color:#00f;
color:#eee;
}
select {
z-index:0 ! important;
}
-->
</style>
</head>
<body>
<h1>
z index bug in ie6
</h1>
<p>
<a class="popup" href="http://www.example.com">
Lorem ipsum dolor sit amet<span>Consectetuer adipiscing elit. Donec in prus a dui venenatis laoreet.</span></a>
<br>Maecenas iaculis justo non leo.
<br><input type="text"value="Aliquam erat">
<br><select><option>Vestibulum sollicitudin</option></select>
<br>Sed hendrerit nunc non quam.
</p>
</body>
</html>

Xapti

4:47 pm on Jul 21, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I guess you're aware that it's a serious bug in IE6, that isn't easily fixed.
I'm sure using a search you'll notice several topics just like this.

As far as I remember, putting them in a lower stacking context still wouldn't help I don't think, right?

I think the solutions were to use a flash file, iFrame, or another form element to overlap the element, and style it to look as if it was a div (disabled textarea would be the most likely). Since links don't work in textarea (I don't think, especially a disabled one), I think the only option would be the really annoying method of using a flash file, or the pretty feasible option of using an iframe.

Overall though, I'd say just screw IE6. People will hopefully realize it's the browser's fault, and complain to their superiors to get ther computer updated (since as far as I know, it's only business computers that are mostly still running IE6)

Sorry if my lack of knowledge/memory isnt' useful. I didn't look at the previous topics, but I'm sure they are around, and carry more information on this topic.

[edited by: Xapti at 4:52 pm (utc) on July 21, 2008]

Fotiman

4:49 pm on Jul 21, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



IE6 has a bug.
You need to create an iframe "shim" to cover the select element. Try googling for iframe shim.

lavazza

6:20 pm on Jul 21, 2008 (gmt 0)

10+ Year Member



Thank you both

It's reassuring to know that this place is always here as a source of great - and prompt - advice :)

I'd say just screw IE6

I think I will... until I have time to play... I do like to play...

Try googling for iframe shim

Thanks for the keyword tip :)

Found a few promising looking sites... Now I know what to play with :)