Select tag overlap in IE

Update: I have a new article that supports nested menus with instructions on use at Select tag overlap in IE, Part II. Please go to the new article as it give you information that is not available in this article.

Sometime ago I was asked if I knew of an IE fix to hide select elements when postitioning other elements over them.

Does anybody know of any javascript that will disable or hide the select element tag?

The problem only occurs in IE when the dropdown menu overlaps a select tag in form. It appears that nother will override the z-index of the select tag in IE exept to hide it.

This is a problem with IE in that select elements do not honor the z-index and will display over any other position element, like a dropdown menu. You can eliminate the problem by inserting an iframe shim underneath the drop down. It's not an original idea, I don't know where I found the solution. I modified the suckerfish drop downs javascript file to add an iframe shim. Unfortunately IE 5.0 does not support this method, so I simply hide select elements when using IE 5.0.

You can download it at topnav.js and see a sample with opacity of a single drop down menu here and a cascading vertical menu solution written by another author here.

UPDATE: The unknown author is Ilya I. Gerasimenko and a few fine sandbox experiments can be found at DOM Studies.

UPDATE: You see a temporary sample with opacity of a single drop down menu here.

36 Comments

Gravatar Image1. Posted at 1/12/2005 3:40:49 AM by Mark Pors

Hi,

Could you please show the trick you use for IE5.0?

The first link in your article doesn't work anymore, and the solution of the other example (2nd link) doesn't work in IE5.0

Thanx!!

Mark

Gravatar Image2. Posted at 1/27/2005 10:27:53 AM by John A

I have done something like this for a work project. The problem comes in when you use SSL for security reasons. The Iframe causes a lot of problems with SSL.

Are there any other elements that could "shield" the select boxes?

Gravatar Image3. Posted at 1/28/2005 5:15:20 PM by Tanny O'Haley

John,

I do not know of any other elements but I do know a workaround. The problem is src statement in the iframe. If you don't provide a src IE thinks that you are going after a non-https resource and gives the user the non-ssl/ssl error. The workaround to this is to create a blank.htm page and reference it in the src parameter.

<iframe src="blank.htm"...>

Gravatar Image4. Posted at 1/28/2005 5:19:21 PM by Tanny O'Haley

The code automatically hides all selects on the page if the version of IE is 5.0 because IE 5.0 does not support the iframe hide method.

Gravatar Image5. Posted at 4/28/2005 1:34:20 PM by Michiel

I am trying out your method on the son of suckerfish menu's. I am using an absolutely positioned vertical menu. The calculated height is more than it should be. Err... it does not work... ouch... can you fix it?

Gravatar Image6. Posted at 5/5/2005 4:40:02 PM by Tanny O'Haley

Michiel,

I'm in the thinking stage of rewriting the code. When I originally wrote it, I was not thinking of vertical or multi-tiered menus. Ilya I. Gerasimenko has used my theory and written a version that supports multi-tiered vertical menus but does not have support for IE 5.0. You can find it at "Cascading Menu: Vertical (IE <select> bug fix)".

My code uses an iframe to let an item go over select tags. IE 5.0 does not support the iframe element. So for IE 5.0 what I did is simply hide all select tags when the menu was displayed and un-hid the select tags when the menu was hidden. I have been thinking about merging my code with Ilya's but have yet had time to do so. I would suggest that for now you use Ilya's code.

Please tell me if that helps you.

Gravatar Image7. Posted at 6/2/2005 1:38:37 PM by Alex Weber

Oh yes, very cool and simple. Thanks a lot! You are my knight in shining armor.

Gravatar Image8. Posted at 6/5/2005 5:20:28 PM by Tanny O'Haley

I'm glad you found this helpful.

Version 2.0 coming out in about a week. It supports cascading drop down menus and uses unobtrusive javascript so all you have to do is include the script, create a little CSS and assign a class to the UL you want to make a navigator. I've already coded the new version, I'm now working on a sample that includes a drop down menu and a vertical menu.

Gravatar Image9. Posted at 8/30/2005 11:40:40 PM by Techie Pro

this was a good one Tanny.

My problem still remains as i was using a menu provided by the following site :

{ Link } .

Though , code is very much similar , but i was unable to integrate ur solution with the same. Can u help me on this ?

Gravatar Image10. Posted at 9/5/2005 9:07:50 AM by

does anyone have a fix to sucker fish menu and select tag problem.

Gravatar Image11. Posted at 10/6/2005 8:18:22 PM by carolyn

Need help with the drop down fix for the so think menu ...

please send email with contact information so I can contact you. Thanks!

Carolyn

Gravatar Image12. Posted at 11/17/2005 5:36:36 AM by Elprinzo

I'm using a fishsucker horizontal menu and encountered following problem after changing my stylesheet:

The menuItems are not linkable(ie on mouseclick nothing happen). I' using ie6 as browser.

Would be very grateful for any help on how to convert this example to horizontal menu and also solving "ie selectbox over menu problem".

Gravatar Image13. Posted at 1/13/2006 3:09:09 AM by NARSI REDDY

i devoleped a vertical menu by modifing an existing .js file with out using frames and iframes,But the problem is when i opened the submenus it is overlapping with the combobox,selectbox like widowed elements of HTML page, so i want to avoid these overlapping of widowed elements with the Submenus and menus,can any body send the solution for me,help please, im using IE as a browser

Gravatar Image14. Posted at 1/19/2006 2:09:30 AM by Ron Kok

Is it also possible to do this with a CSS-tooltip? I have the same problem with this as you guys have with the dropdown menu... I build the tooltip like this:

[code]

<a><span><p>Tooltiptext</p></span></a>

[/code]

Gravatar Image15. Posted at 2/27/2006 4:01:40 PM by Talha Rizvi

If you do try this with IE5, will the dropdowns show up and just not display over the <select> tag? Or will nothing show up?

Thanks,

Gravatar Image16. Posted at 3/3/2006 1:21:32 PM by Tanny O'Haley

Talha,

In IE5 the select elements will be hidden. In IE5.5 and above the select elements will not be hidden but the menu items will go over select elements instead of under them.

Gravatar Image17. Posted at 4/2/2006 11:40:56 PM by Michael

"Cascading Menu: Vertical (IE <select> bug fix)" is built for vertical drop down menu, can i have horizontal one?

Gravatar Image18. Posted at 4/3/2006 1:01:15 PM by Tanny O'Haley

Hi Michael,

Yes you can have a horzontal menu. Look at Ilya's "Cascading Menu: Vertical (IE <select> bug fix)" sample. Change the CSS to not make the first level a horzontal menu. In the CSS you should be able to modify it by taking out all the float: left rules. Thinking about it, the dropdown menus are horizontal menus.

Tanny...

Gravatar Image19. Posted at 4/6/2006 4:26:10 AM by Ryan

Hi,

Created a grandson of suckerfish that can hover over selects, or hide selects if necessary in older browsers.

see

{ Binary Operation - Grandson of Suckerfish }

I will add fixes as necessary, but I tested it on a few browsers and it seems to work well.

Gravatar Image20. Posted at 4/24/2006 2:32:09 PM by Sherry

Hi-

I'm doing a similar case of having a popup window but several select tags from the form are overlapping the popup window. Is there a way to fix it in IE 5.

sherry

Gravatar Image21. Posted at 4/25/2006 2:06:18 PM by Tanny O'Haley

Hi Sherry,

In IE 5.0 you'll have to hide the selects, which is what I do in the iehover-fix.js file. On mouse over I hide the selects and on mouse out I redisplay them by changing the class name. Here are the functions that I use.

function hideSelects(){

    var oSelects=document.getElementsByTagName("select");

    for(var i=0;i<oSelects.length;i++)

       oSelects[i].className+=" hide";

}

function showSelects(){

    var oSelects=document.getElementsByTagName("select");

    for(var i=0;i<oSelects.length;i++)

       oSelects[i].className=oSelects[i].className.replace(" hide","");

}

Gravatar Image22. Posted at 7/26/2006 4:01:55 AM by ck

can some body give out the full solution???

please................

Gravatar Image24. Posted at 9/13/2006 7:00:05 AM by Slava Naumenko

Here is an example of a menu using iframes and z-index to shield select element in IE.

{ Link }

Gravatar Image25. Posted at 9/13/2006 8:35:15 AM by Tanny O'Haley

Hi Slava,

There are many accessibility problems and maintenance issues with the menu example link that you gave. The beauty of Suckerfish menus is that the structure is semantic HTML. All you have to know is how to maintain an unordered list. If a person doesn't have CSS or Javascript turned on or they are using a text browser or assistive technology, the structure in the HTML will allow a user to navigate your site! The solution you gave requires that all navigation is embedded in Javascript. This is not a good idea. You want to separate structure (HTML) from presentation (CSS) and behavior (Javascript).

Please take time to read about Web Standards. I suggest starting with Designing With Web Standards, 2nd Edition by Jeffery Zeldman. Then check out the guides at htmldog.com and Unobtrusive Javascript.

Gravatar Image26. Posted at 9/19/2006 5:29:58 PM by Kristin

Thank you this is just what I needed. I am having a problem. In IE the sub menu is blank or white. When the page first loads it displays a little and then disappears. It's like it gets hidden behind the iframe.

I have created a screen shot if that will be of help.

{ Link }

Please contact me if you need more information.

Gravatar Image27. Posted at 9/25/2006 7:23:44 AM by JOHN LOVE

My scenario via:

{ Link }

is that I have an <IFRAME> which is always in front of IE Mac 5.2 but appears okay in IE Windows.

Like many of the bloggers I am starting with Suckerfish Drop Down code.

Thanks in advance,

John Love

jolove@up.net

Gravatar Image28. Posted at 9/25/2006 12:06:59 PM by Tanny O'Haley

Hi John,

I tried the link you left but was not able to see any menu. I've given up supporting IE Mac 5.x though if the menus are working I could check it out. From the top of my head, you might try playing with the z-index. Make sure that the z-index for the menu is higher than the z-index of your page iframe.

Tanny...

Gravatar Image29. Posted at 12/12/2006 2:07:36 AM by Elavazhuthi

Hi All,

Can anyone tell, how to display superscript text to display formulas in <select> box.

Gravatar Image30. Posted at 2/3/2007 12:33:57 AM by suvaco

falae galera , a ,minha duvida é a seguinte naum sei nada de javascript para isso tenho q visitar sites americanos sendo que os brasileiros explicam porcaria nenhuma

Gravatar Image31. Posted at 12/3/2007 1:57:12 PM by lokin

Greetings Tanny,

I am hoping you can help. I have modified the css of the son of suckerfish menu for the design we have. It looks and works great on everything until I came across Flash and Select elements which overlay in IE as detailed in this article.

I have tried the work around but I seem to be missing something. Currently it adds in a new box that is white and pushes my menu that I created down.

Please see the link provided for an example!

Hope you can help.

Thanks,

Lokin

{ Link }

Gravatar Image32. Posted at 3/3/2008 12:15:55 PM by Steven Rogers

You could do this with jQuery.

Such as...

$().ready(function() {

$("#mydiv").mousedown(function() {

$("select").hide();

});

});

Of course, this example is rather skeleton. You'll need to play with it, but the jQuery library makes this very easy.

Gravatar Image33. Posted at 4/21/2008 8:54:05 AM by Molinet Fabien

Hi,

I have done a small Javascript that corrects this SELECT bug under IE :

{ Link }

It does the trick automatically for you.

The code is released under BSD licence.

Furthermore, you'll find 3 public methods in the Javascript. I think that you'll find them usefull :)

Please give me some feedback !

Best regards,

Molinet Fabien

fabien.molinet [you know what] gmail.com

Gravatar Image34. Posted at 8/20/2008 6:12:27 AM by Trupti

Hi,

I have code in asp using vbscript in which dropdown menu is shown if we click on Main menu.I hide that dropdown menu on click on the displayed page by calling onclick event of blank image included in img tag.Now the problem is if i have combo box on page then after clicking on combo ,dropdown menu wont hide.The reason i found is clicking on combo wont call image's onclick event.Even when i put coloured image and displayed then all other controls like text boxex,buttons,check boxes,label got covered except combo box.

Any body helps me how can i achieve hiding of dropdown menu on clicking Combo box

Gravatar Image35. Posted at 9/21/2008 11:03:59 PM by Anthony Garrett

Hi Tanny,

One thing for anyone coding this is to remember that if you hide select boxes - store the value of the attribute you're changing at the time, this allows you to restore the page to the condition it was in. I have come across too many otherwise professional looking scripts that simply hide everything then make them visible again - forgetting that they may have been hidden (or have one of a number of other valid values) in the first place. This can severely impact other scripts used on the page.

I personally prefer the iframe method but when I code the hiding of select boxes I assign the value I am replacing to a custom attribute then use that to restore the original value when needed. Easily done and much less intrusive.

All the best.

Gravatar Image36. Posted at 3/13/2010 2:38:02 AM by Jessica Winslet

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

Add a comment

Discussion for this entry is now closed.