Iframe shimming or ie6 (and below) select z-index bug

Question

Um, I'm not sure if anyone has encountered this problem.
a brief description on IE6, any <select> objects are displayed on any other element, even a div ... means that if you have a fantastic javascript effect that displays a div that should be on top of everything (for example: lightbox, multibox, etc. e ...) onclick of a certain element and that div overlaps a <select> your div will be displayed as if it were under <select> [in this case the maximum and minimum z-index does not work]

I tried google search and found iframe solution
but I needed some pretty clean alternatives, or better yet, did anyone find a better solution? since the method using iframes uses about 130 MB of RAM, it can slow down the work of computers with poor people.

Answer 1

You do not need to hide each select with a loop. All you need is a CSS rule:

 * html .hideSelects select { visibility: hidden; } 

And the following JavaScript:

 //hide: document.body.className +=' hideSelects' //show: document.body.className = document.body.className.replace(' hideSelects', ''); 

(Or you can use your favorite implementation of addClass / removeClass ).

Answer 2

There is a plugin for jquery called bgiframe that simplifies the implementation of the iframe method.

Personally, as a web developer, I am so much so that I'm no longer interested in the user experience in IE6. I will make it as close as possible to the “correct” one, and make sure that it works, but as far as speed goes, it’s too bad. They can be updated. IE7 (although still quite slow compared to any other browser) came out for 2 years (almost up to a day!). IE8 is coming soon. Firefox is available for every platform. Safari is also an option (and super fast). Opera is available for most / every platform.

IE6 was released over 7 years ago. IMHO, there is no reason to continue to use it, except for lazy users and incompetent IT departments (or if you are a web developer).

Answer 3

in case anyone is interested, here is some IE cropping code.

 * html .shimmed { _azimuth: expression( this.shimmed = this.shimmed || 'shimmed:'+this.insertAdjacentHTML('beforeBegin','<iframe style="filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);position:absolute;top:0px;left:0px;width:100%;height:100%" frameBorder=0 scrolling=no src="javascript:false;document.write('+"''"+');"></iframe>'), 'inherit'); } 

ref: this meaning is subtleGradient and this message is from Zach Leatherman

Answer 4

Prior to IE7, the drop-down list was a "windowed" control, meaning that it was rendered as a control directly by Windows, and not by a browser synthesizing it. Thus, it was not possible to maintain z-indexing against other synthesized controls.

To appear above the DDL, you must use another control, such as IFRAME. You can also use a little-known IE-only function called window.createPopup (), which essentially makes the popup window without chrome. This has limitations, such as a transient click, but they are really useful if you are creating a hover menu system.

Answer 5

The simplest and most elegant solution to this annoying IE error is at http://docs.jquery.com/Plugins/bgiframe using jQuery.

I came to this conclusion after trying for 2 days to work with WebSphere Portal / Portal applications, where everything is dynamic, including the flight menu.

Answer 6

There is also an activex method that I'm starting to research. To do this, create conditional code to use the activex control instead of the select box for ie6. There, the demo script shows a technique that is discussed in more detail here .

Update: it seems that MS Office is necessary for the active-x control to be on the user machine. In theory, it might be possible to include it somewhere, one way or another, but it becomes much merciless.

Answer 7

I know that many people offered their own tips, but in my case, I just simply hid the select using jquery as shown below.

 $(':date').dateinput({ format: 'dd/mm/yyyy', onBeforeShow: function(event) { $('select').hide(); }, onHide: function(event) { $('select').show(); } });