Like many people I had the infamous bug in Internet Explorer related to its management of SELECT: if a block is located above a SELECT, the SELECT is always above. You can play with the z-index, putting strange values, huge values, nothing will work. Internet Explorer will still ignore them.

That's really boring when you want to use floating blocks, pull-down menus, ...

In fact this bug is related to the internal management of SELECT by Internet Explorer. This component is created from the dropdownlist component of the operating system and it doesn't take into account any logic defined at the browser level.

However, there is a parade ... But it is very dirty :)

It is necessary to put an iframe on top of the tag SELECT. Therefore, the SELECT tag will be hidden, and we will be able to manage the logic above the iframe.

Yes, but adding an iframe to the HTML code in order to manage the problems of IE is dirty! Moreover it  would invalidate any W3C's XHTML validation and semantics would be greatly affected...

I realized a little Javascript, that I named Select Fix. It corrects the problem under IE automatically for you. You just have to include it using conditional comments :

<!--[if lte IE 6.5]>
<script type="text/javascript" src="select_fix.js"></script>
<link media="screen" type="text/css" rel="stylesheet" href="select_fix.css" />
<![endif]-->

By including it as well, it will be loaded on versions of Internet Explorer less than 7. Thus IE 6 and IE 5.x should be resolved.

The script is non-intrusive, it should not pose a problem if you have other JavaScripts.

By including this script to your page you have in addition 3 public methods:

1. SelectFix.repairFloatingElement(element) : repair the element passed as a parameter (it will add an iframe in Internet Explorer if necessary)
2. SelectFix.autoRepairFloatingElements(temps_ms) : repairs every x milliseconds all the elements on the page (useful if it incorporates other Javascripts that will change the page after its loading)
3. SelectFix.parseFloatingElementsFixed(bool) : Indicates whether to parse the children of elements that have been repaired (defaults to false)
   
4. SelectFix.isZIndexRequired(bool) : Indicates whether a zIndex is required in order to parse floating elements (defaults to false, no zIndex required)
   

You can download Select Fix here

The archive contains some files :

1. examples/ : this folder contains example files
2. readme/ : this folder contains help files
3. LICENSE : the BSD license 
4. select_fix.css (616 o) : CSS to include in your page using a conditional comment
5. select_fix.js (1.95 ko): Javascript to include in your page using a conditional comment
6. select_fix.source.js (5.49 ko): Javascript source file. If you want to understand the code, you should look here.
   

You can download Select Fix here

Note : Internet Explorer 7 corrects the issue of SELECT passing over blocks

Et voilà, comme beaucoup de personnes j'ai eu le fameux bug d'Internet Explorer lié à sa gestion des SELECT : si un bloc se trouve au-dessus d'un SELECT, le SELECT passera toujours au-dessus. Vous pouvez vous amuser avec le z-index, mettre des valeurs exotiques, des valeurs énormes, rien n'y fera. Internet Explorer n'en tiendra pas compte.

Génant dès que l'on veut utiliser des blocs flottants, des menus déroulants, ...

En fait ce bug est lié à la gestion des SELECT en interne d'Internet Explorer. Ce composant est créer à partir du composant dropdownlist du système d'exploitation et il outrepasse donc toute la logique que l'on aurait défini au niveau du navigateur.

Il existe toutefois une parade... mais elle est très sale :)

Il est nécessaire qu'une iframe vienne se placer au-dessus de la balise SELECT. Dès lors, la balise SELECT sera cachée et l'on pourra gérer la logique au-dessus de l'iframe.

Oui mais ajouter une iframe à mon code HTML pour gérer les problèmes d'IE c'est sale ! De plus cela invaliderait toute validation W3C XHTML et la sémantique serait fortemment affectée...

J'ai réalisé un petit script Javascript, que j'ai nommé Select Fix, qui corrige ce problème d'IE automatiquement pour vous. Il suffit de l'inclure de la manière suivante via un commentaire conditionnel :

<!--[if lte IE 6.5]>
<script type="text/javascript" src="select_fix.js"></script>
<link media="screen" type="text/css" rel="stylesheet" href="select_fix.css" />
<![endif]-->

En l'incluant ainsi, il ne sera chargé que sur les versions d'Internet Explorer inférieure à la 7. Ainsi IE 6 et IE5.x devraient être réglés.

Ce script étant non intrusif, il ne devrait donc pas poser de problèmes si vous avez d'autres Javascripts.

En incluant ce script à votre page vous disposez en plus de 3 méthodes publiques :

1. SelectFix.repairFloatingElement(element) : répare l'élement passé en paramètre (va lui ajouter une iframe sous Internet Explorer si nécessaire)
   
2. SelectFix.autoRepairFloatingElements(temps_ms) : répare tous les x millisecondes tous les élements de la page (utile si l'on incorpore d'autres Javascript qui vont modifier la page après son chargement)
3. SelectFix.parseFloatingElementsFixed(bool) : indique si l'on doit parser les enfants des élements qui ont été réparés (par défaut à false)
4. SelectFix.isZIndexRequired(bool) : indique si un zIndex est nécessaire pour continuer à parser les blocs flottants (par défaut à false, pas de zIndex nécessaire)

Vous pouvez télécharger Select Fix ici

L'archive contient quelques fichiers :

1. examples/ : ce dossier contient des fichiers d'exemples
   
2. readme/ : ce dossier contient des fichiers d'aide
3. LICENCE : il s'agit de la licence BSD
4. select_fix.css (616 o) : la CSS à inclure dans votre page via un commentaire conditionnel
   
5. select_fix.js (1,95 ko) : le Javascript à inclure dans votre page via un commentaire conditionnel
6. select_fix.source.js (5,49 ko) : ce Javascript est le fichier source. Si vous voulez comprendre le code, c'est celui-ci qu'il faut regarder.

Vous pouvez télécharger Select Fix ici

Note : Internet Explorer 7 corrige le problème du SELECT qui passe au-dessus des blocs