Les formulaires (partie 2) : Comment faire passer un div au dessus d'un select dans IE ?

Version imprimable

Comment faire passer un div au dessus d'un select dans IE ?
:arrow: http://javascript.developpez.com/faq...put.div.select

Cette Q/R est désormais [Obsolète] en tout cas pour IE9 avec un DOCTYPE XHTML1.1

Exemple en CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title></title>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="fr" />
<style type="text/css">
<!--
div{
        position: absolute;
        width: 200px;
        height: 200px;
        border: 1px solid #FF0000;
        z-index: 10;
        top: 0;
        left: 0px;
}
-->
</style> 
 
</head>
 
<body>
<div> Antequam est Februario Februario Quo nascetur in in paludatus 
consulatu denique Quo Sortietur Quo absurdum sine et denique toto 
Proficiscetur sine non ante pervenire antequam non habebit est provinciam 
absurdum.
</div>
 
<div>
<select>
	<option>a</option>
	<option>b</option>
	<option>c</option>
	<option>d</option>
</select>
</div>
 
</body>
</html>

16/11/2013, 15h20
NoSmoking

Relecture

Pas de remarque, si ce n'est que je mettrais un doctype HTML5, mais il est vrai que cela date un peu quand même.
16/11/2013, 17h53
Auteur

Si elle date, est-ce utile de mettre un doctype HTML 5 ? Cela donnerait l'impression de faire du vieux code avec de nouvelles normes :aie:
16/11/2013, 22h38
NoSmoking

Le doctype HTML 5 ne pose aucun soucis même sous IE6 qui est dans ce cas en mode standard.
D'un autre coté il est vrai qu'actuellement une simple gestion des z-index est suffisante.
Pensons à ceux qui on encore pour leur intranet IE6 ;).
17/11/2013, 11h20
Auteur

Comment présenterais-tu la chose ?

Ce problème ne se rencontre plus depuis IE7 qui gère cela correctement via le z-Index.
Cette Q/R est donc tout à fait adaptée à IE6, il en reste, ainsi que l'exemple associé mis par siddh.

On pourrait se contenter d'indiquer que cette Q/R est applicable à IE6 et que les versions suivantes de IE gère cela correctement.

On pourrait même ne changer que le titre.

Proposition :
----------------------------------------------------------------------------------------
Comment faire passer une div au dessus d'un select pour IE6 ?
http://www.developpez.com/template/kit/kitwarning.png Cette Q/R n'est applicable qu'au navigateur IExploreur pour ses versions 6 et antérieures.

Il suffit de mettre en place une <iframe> au même niveau que la <div>. Cela permet au contenu de celle ci d'apparaître au dessus du <select>.

La méthode ci-dessous permet de positionner l'iframe au niveau de la div :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function putFrame() { var f = document.createElement("iframe"), d = document.getElementById("theDiv"), fStyle = f.style; // application du style sur l'IFRAME fStyle.position = "absolute"; fStyle.width = d.offsetWidth + "px"; fStyle.height = d.offsetHeight + "px";; fStyle.top = d.offsetTop + "px"; fStyle.left = d.offsetLeft + "px"; fStyle.zIndex = 1; document.body.appendChild(f); }

28/11/2013, 12h08
vermine

Ok pour un changement de titre et une info sur les versions ultérieures. ;)