shepherdweb.com

Select Element Z-index Ignored by IE 6 - Workaround

February 14th, 2007

IE 6 will continue to be a problem for web developers for a while longer. Statistics for this site show that even though IE 7 has been out for several months, 30% of my visitors still use IE6. IE 7 is climbing fast (currently at 22%), but still has a ways to go before IE 6 moves into irrelevance. I also suspect that the topics of my site draw more Firefox and Safari users than is typical on the rest of the web.

I recently discovered this workaround for a scenario that is new to me. Apparently this is a common problem. However, being a developer who in the past has used little (if any) javascript in to build sites, I had not encountered it before.

The bug, present in IE 6 and below, is manifested when a positioned block should cover a select element in another layer. This could occur easily with a dropdown menu or a popup layer that need to open over a form containing a select element. The easiest way around this is to position the conflicting elements so that they do not interfere with each other. However, if this is not possible, there is a workaround using the iframe element and IE conditional comments.

IE 6 Screenshot - demonstrating the bug. Shows two select elements poking through the positioned layer.

Firefox 2.0 Screenshot - the way it should be. Shows the one select element that is actually in the positioned layer. The two below it are hidden by the layer’s light-blue background.

A few seconds of Googling turned up the following useful links:

The first link offered a useful solution which I am abbreviating here:

#popup iframe { display:none;/*sorry for IE5*/ display/**/:block;/*sorry for IE5*/ position:absolute;/*must have*/ top:0;/*must have*/ left:0;/*must have*/ z-index:-1;/*must have*/ filter:mask();/*must have*/ width: 100%;/*must have for any big value*/ height: 100%;/*must have for any big value*/; }

In the linked example width and height are both set to 3000px. I found that it worked better for me to use 100% instead since the former caused unnecessary scrollbars to appear on the page.

<div id="bd"> <h1>select element z-index workaround</h1> <div class="parameter"> <label for="ddTest">Test</label> <select id="ddTest"> <option>…</option> <option>pick me</option> </select> </div> </div> <div id="popup"> Is the select element poking through? It shouldn't be! <!--[if lte IE 6.5]><iframe></iframe><![endif]–> </div>

Download the demo code: Select Element Z-index Workaround Code

Technorati Tags: IE, select, z-index, CSS, Internet Explorer

Filed under: Internet Explorer, css, web development by Shane |

18 Comments »

Will wrote,

That solution effectively hides all select controls on the screen.

A better method seems to be to generate an iframe layer that exactly covers the same area as the content you want to display.

I’m experimenting with something like this

function addDivForIE(div) {
var objIframe = createAndAddUniqueObject(”iframe”, “hideSelect”,div.offsetParent);
objIframe.style.position = “absolute”;
objIframe.style.left = div.offsetLeft + “px”;
objIframe.style.top = div.offsetTop + “px”;
objIframe.style.height = div.offsetHeight + “px”;
objIframe.style.width = div.offsetWidth + “px”;
objIframe.style.zIndex = div.style.zIndex - 1;
}

Comment on April 21, 2007 @ 4:40 pm
Shane wrote,

@Will,
That’s a good point—I wonder if there’s a way to achieve this without having to rely on javascript.

Comment on April 21, 2007 @ 5:43 pm
Tom wrote,

The first example linked IS WITHOUT JS. It uses the ActiveX render engine to re-render the div/iframe on top of the pulldown (as far as I understand it).

Comment on May 4, 2007 @ 8:16 am
I nostri bookmark dal 26 Luglio al 18 Agosto » hobgobbler.com wrote,

[...] Select Element Z-index Ignored by IE 6 - The bug, present in IE 6 and below, is manifested when a positioned block should cover a select element in another layer. [...]

Pingback on September 28, 2007 @ 2:38 pm
Mike Watson wrote,

Complete example:

Test Menu

var mnuColor = ‘#000099′;
var mnuHighlite = ‘#3333ff’;

function InitMenuBar()
{
menuBar.style.backgroundColor=mnuColor;
var bar = menuBar.children
for(var i=0;i 4″
// var tmp = eval(menuItem.id+”_Arrow”)
//tmp.style.pixelLeft = 35 //menuItem.getBoundingClientRect().right - tmp.offsetWidth - 15
FindSubMenu(menuItem.menu)
}

}
}

function highlight(obj)
{
//The parent element is the menu that contains
//the menu items.
var PElement = eval(obj.parentElement.id)
if(PElement.hasChildNodes() == true)
{
var Elements = PElement.children
for(var i=0;i window.screen.availWidth )
{
menu.style.pixelLeft = obj.getBoundingClientRect().left - menu.offsetWidth
}
}
}

function CoverOn(div) {

if(div.Lvl != null)
{
var fraCover = document.all.fraCover(parseInt(div.Lvl));
fraCover.style.position = ‘absolute’;
fraCover.style.left = div.offsetLeft + ‘px’;
fraCover.style.top = div.offsetTop + ‘px’;
fraCover.style.height = div.offsetHeight + ‘px’;
fraCover.style.width = div.offsetWidth + ‘px’;
fraCover.style.zIndex = div.style.zIndex - 1;
fraCover.style.visibility = “visible”;
}
}

function CoverOff(Lvl) {
var fraCover = document.all.fraCover;
for(var j =Lvl;j

BODY {
PADDING-RIGHT: 0px;
PADDING-LEFT: 10px;
FONT-SIZE: 100%;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
COLOR: #000000;
PADDING-TOP: 10px;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
BACKGROUND-COLOR: #ffffff;
TEXT-ALIGN: left
}

#menuBar {
top: 108px;
width: 800px;
background-color: #003399;
BORDER-RIGHT: #000000 solid 1px;
Z-INDEX: 100;
BORDER-LEFT: #000000 solid 1px;
BORDER-BOTTOM: #000000 solid 1px;
POSITION: absolute;
}
.Bar {
BORDER-RIGHT: #ffffff 1px solid; PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FONT-WEIGHT: bold; FONT-SIZE: 70%; FLOAT: left; PADDING-BOTTOM: 0px; CURSOR: hand; COLOR: #ffffff; PADDING-TOP: 0px; HEIGHT: 15px; TEXT-ALIGN: left
}
.Bar A {
FONT-WEIGHT: bold; COLOR: #ffffff; TEXT-DECORATION: none
}
.mnu {
BORDER-RIGHT: buttonhighlight thin outset;
BORDER-TOP: buttonhighlight thin outset;
Z-INDEX: 100;
VISIBILITY: hidden;
BORDER-LEFT: buttonhighlight thin outset;
BORDER-BOTTOM: buttonhighlight thin outset;
POSITION: absolute;
BACKGROUND-COLOR: #dbeaf5;
}
.mi {
PADDING-RIGHT: 10px;
PADDING-LEFT: 10px;
FONT-WEIGHT: bold;
FONT-SIZE: 70%;
CURSOR: hand;
COLOR: #ffffff;
LINE-HEIGHT: 15px;
BORDER-BOTTOM: white 1px solid;
TEXT-ALIGN: left;
Z-INDEX: 100;
}
.mi A {
FONT-WEIGHT: bold; COLOR: #ffffff; TEXT-DECORATION: none
}

Bar1
Bar2

MenuItem1
MenuItem2
MenuItem3

MenuItem21
MenuItem22
MenuItem23

MenuItem221
MenuItem222
MenuItem225

MenuItem221
MenuItem222
MenuItem223

This is SELECT1
This is SELECT2

This is SELECT
This is SELECT
This is SELECT
This is SELECT
This is SELECT
This is SELECT

Comment on September 28, 2007 @ 8:44 pm
Mike Watson wrote,

Test Menu

var mnuColor = ‘#000099′;
var mnuHighlite = ‘#3333ff’;

function InitMenuBar()
{
menuBar.style.backgroundColor=mnuColor;
var bar = menuBar.children
for(var i=0;i 4″
// var tmp = eval(menuItem.id+”_Arrow”)
//tmp.style.pixelLeft = 35 //menuItem.getBoundingClientRect().right - tmp.offsetWidth - 15
FindSubMenu(menuItem.menu)
}

}
}

function highlight(obj)
{
//The parent element is the menu that contains
//the menu items.
var PElement = eval(obj.parentElement.id)
if(PElement.hasChildNodes() == true)
{
var Elements = PElement.children
for(var i=0;i window.screen.availWidth )
{
menu.style.pixelLeft = obj.getBoundingClientRect().left - menu.offsetWidth
}
}
}

function CoverOn(div) {

if(div.Lvl != null)
{
var fraCover = document.all.fraCover(parseInt(div.Lvl));
fraCover.style.position = ‘absolute’;
fraCover.style.left = div.offsetLeft + ‘px’;
fraCover.style.top = div.offsetTop + ‘px’;
fraCover.style.height = div.offsetHeight + ‘px’;
fraCover.style.width = div.offsetWidth + ‘px’;
fraCover.style.zIndex = div.style.zIndex - 1;
fraCover.style.visibility = “visible”;
}
}

function CoverOff(Lvl) {
var fraCover = document.all.fraCover;
for(var j =Lvl;j

BODY {
PADDING-RIGHT: 0px;
PADDING-LEFT: 10px;
FONT-SIZE: 100%;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
COLOR: #000000;
PADDING-TOP: 10px;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
BACKGROUND-COLOR: #ffffff;
TEXT-ALIGN: left
}

#menuBar {
top: 108px;
width: 800px;
background-color: #003399;
BORDER-RIGHT: #000000 solid 1px;
Z-INDEX: 100;
BORDER-LEFT: #000000 solid 1px;
BORDER-BOTTOM: #000000 solid 1px;
POSITION: absolute;
}
.Bar {
BORDER-RIGHT: #ffffff 1px solid; PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FONT-WEIGHT: bold; FONT-SIZE: 70%; FLOAT: left; PADDING-BOTTOM: 0px; CURSOR: hand; COLOR: #ffffff; PADDING-TOP: 0px; HEIGHT: 15px; TEXT-ALIGN: left
}
.Bar A {
FONT-WEIGHT: bold; COLOR: #ffffff; TEXT-DECORATION: none
}
.mnu {
BORDER-RIGHT: buttonhighlight thin outset;
BORDER-TOP: buttonhighlight thin outset;
Z-INDEX: 100;
VISIBILITY: hidden;
BORDER-LEFT: buttonhighlight thin outset;
BORDER-BOTTOM: buttonhighlight thin outset;
POSITION: absolute;
BACKGROUND-COLOR: #dbeaf5;
}
.mi {
PADDING-RIGHT: 10px;
PADDING-LEFT: 10px;
FONT-WEIGHT: bold;
FONT-SIZE: 70%;
CURSOR: hand;
COLOR: #ffffff;
LINE-HEIGHT: 15px;
BORDER-BOTTOM: white 1px solid;
TEXT-ALIGN: left;
Z-INDEX: 100;
}
.mi A {
FONT-WEIGHT: bold; COLOR: #ffffff; TEXT-DECORATION: none
}

Bar1
Bar2

MenuItem1
MenuItem2
MenuItem3

MenuItem21
MenuItem22
MenuItem23

MenuItem221
MenuItem222
MenuItem225

MenuItem221
MenuItem222
MenuItem223

This is SELECT1
This is SELECT2

This is SELECT
This is SELECT
This is SELECT
This is SELECT
This is SELECT
This is SELECT

=============End===================================
–>

Comment on September 28, 2007 @ 8:49 pm
Mike Watson wrote,

Here is the body of the html that is missing. Hopefully this site won’t strip it again.

body id=”Body” onload=”InitMenuBar();”>

DIV Id=menuBar Lvl=0 >
DIV Id=Bar1 class=Bar menu=menu_1 >Bar1/DIV>
Bar2/DIV>
/DIV>

DIV Id=menu_1 class=mnu Lvl=1 style=”z-index:200; position:absolute; “>
DIV Id=mi_1 class=mi >MenuItem1/DIV>
DIV Id=mi_2 class=mi >MenuItem2/DIV>
DIV Id=mi_3 class=mi >MenuItem3/DIV>
/DIV>

DIV Id=menu_2 class=mnu Lvl=1 style=”z-index:200; position:absolute; “>
DIV Id=mi_21 class=mi >MenuItem21/DIV>
DIV Id=mi_22 class=mi menu=menu_22>MenuItem22/DIV>
DIV Id=mi_23 class=mi >MenuItem23/DIV>
/DIV>

DIV Id=menu_22 class=mnu Lvl=2 style=”z-index:200; position:absolute; “>
DIV Id=mi_221 class=mi >MenuItem221/DIV>
DIV Id=mi_222 class=mi >MenuItem222/DIV>
DIV Id=mi_225 class=mi menu=menu_322>MenuItem225/DIV>
/DIV>

DIV Id=menu_322 class=mnu Lvl=3 style=”z-index:200; position:absolute; “>
DIV Id=mi_3221 class=mi >MenuItem221/DIV>
DIV Id=mi_3222 class=mi >MenuItem222/DIV>
DIV Id=mi_3223 class=mi >MenuItem223/DIV>
/DIV>

DIV Id=Selects style=”position:absolute; top:150px;”>
select>
option>This is SELECT1
option>This is SELECT2
/select>

select>
option>This is SELECT
option>This is SELECT
option>This is SELECT
option>This is SELECT
option>This is SELECT
option>This is SELECT
/select>
/DIV>
/body>

Comment on September 28, 2007 @ 8:59 pm
Ramon wrote,

Very well,
I was looking for this and still i don´t had found, but now my problems are over.

Congratulations,
Thanks a lot.

ps: Excuse-me for my English.

Comment on October 10, 2007 @ 6:43 pm
Rob wrote,

Thanks! Finally, a clean(er) solution…

Comment on November 16, 2007 @ 5:00 pm
Anoop wrote,

Is it possible to solve this problem without using i frames?

Comment on December 1, 2007 @ 1:01 am
Joe wrote,

Anoop, yes this is possible.
For example there are a control for ASP.NET called sakuraDropDown. You can find it at sakuraui.com. But it’s supports only ASP and very expensive.

Comment on March 6, 2008 @ 6:48 am
John wrote,

dude, your hack saved my ass, thanks.

John.

Comment on March 9, 2008 @ 8:32 pm
Fabien Molinet wrote,

Hi !

I wrote a small Javascript that use a part of the ” Free Layer” to correct this Internet Explorer bug.

It fixes automatically the problem. You just have to insert the Javascript :
http://fabien-molinet.fr/index.php?option=com_content&task=blogsection&id=8&Itemid=9

Please take a look to my work and send me some feedback !

Best regards,
Fabien Molinet

Comment on April 7, 2008 @ 7:08 am
Fix for IE6 problem with select drop downs ignoring z-index with Jquery wrote,

[...] This is a pesky problem in IE6 that has no simple solution. [...]

Pingback on June 8, 2008 @ 5:17 am
francesco wrote,

I had to add to make it work:

#popup {
overflow:hidden;
}

ps: in your first example:

must end with –>
(zipped example file is ok)

thanks

Comment on June 12, 2008 @ 4:50 pm
francesco wrote,

(broken code in my post)
ps: in your first example:

<!–[if lte IE 6.5]><iframe></iframe><![endif]->

must end with –>
(zipped example file is ok)

thanks

Comment on June 12, 2008 @ 4:53 pm
francesco wrote,

- ->

Comment on June 12, 2008 @ 4:55 pm
prochor wrote,

first solution doesn’t work in ie6

Comment on July 16, 2008 @ 6:20 am

RSS feed for comments on this post.

TrackBack URI

Select Element Z-index Ignored by IE 6 - Workaround

18 Comments »

Leave a comment

Recently Launched

Machinators

HREF=

Melodious

Geek Stuff