Mauvais comportement des menu déroulant sous IE

**KeKeMaN** · 08/10/2008, 09h37

Bonjour,

Mon problème est assez simple (

) : je crée un menu déroulant avec une taille fixe (width: 200px) et contenant des lignes qui parfois font plus que cette taille.
Sous Firefox, le menu déroulant s'agrandit bien, mais sous IE (6 ou 7). Je joints une image qui illustre mes propos.

Mon code (simple) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<html>
  <head>
  <meta http-equiv=content-type content="text/html; charset=utf-8">
    <title>Test</title>
  </head>
 
  <body>
	<select style="width: 200px">
	<option value="0">0 - test test test test test test test</option>
	<option value="1">1 - test test test test test test test test test test</option>
	<option value="2">2 - test test test test test test</option>
	<option value="3">3 - test test test test test test</option>
	<option value="4">4 - test test test test test test</option>
    </select>
  </body>
</html>

Si vous aviez une idée

Merci d'avance

**HiRoN** · 08/10/2008, 12h13

Salut,

L'astuce aurait été d'appliquer un style="width:XXXpx" sur les option de ton select mais ce n'est pas pris en compte par IE.
Perso, je dirai 2 solutions :

1 - Agrandir la liste déroulante (donc modifier le width que tu as mis sur le select, mais en fonction de ton "design" cela peut ne pas le faire).

2 - Se tourner vers du Javascript et tenter de voir comment construire ta propre liste déroulante (de façon a pouvoir appliquer un width "personnalisable" (par ex) à certaines option (voir toutes).

Un petit tour ici pourrait aider (regarde l'exemple d'utilisation que donne l'auteur).

Cordialement,

**kaiser59** · 10/10/2008, 13h37

Salut,

Pourquoi tu veux définir une taille fixe ?

Ne met rien la liste déroulante prendra la taille dont l'option à la plus grande valeur en size...

**HiRoN** · 10/10/2008, 14h13

Salut,
Pourquoi tu veux définir une taille fixe ?
Ne met rien la liste déroulante prendra la taille dont l'option à la plus grande valeur en size...

Il n'a peut-être prévu que 200px de large au niveau de la structuration de son site.
Que faire dans ces cas là ? (lorsqu'on a prévu qu'un espace de XXpx pour la liste déroulante)

**Bisûnûrs** · 10/10/2008, 14h20

Un autre exemple de liste déroulante personnalisée ici :
http://j-willette.developpez.com/tut...ormulaire/#LIV

**HiRoN** · 10/10/2008, 14h29

Donc obligation de se tourner vers du Javascript.
Merci pour l'info Bisûnûrs

**Valki** · 11/10/2008, 17h52

Bonjour,

J'ai trouvé un système uniquement en CSS sans javascript (donc lisible par les moteurs) pour créer des menus déroulants, cela peut faire l'affaire pour un select égélement avec quelques modifs.
Pour le submit, il faudra du js forcément...

Voici mon adaptation avec des div au lieu des dt, dl etc...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<!-- Code CSS !-->
.entete_menu  {padding:4px;margin-right:1px;text-align:center;color:#FFFFFF;background-color:#999999;}
 
div.menu:hover div.entete_menu{color:#555555;background-color:#CCCCCC;border-left:1px solid #999999;border-right:1px solid #999999;}
 
div.menu {width:180px;cursor:pointer;}
 
div.menu div.sousmenu {display:none;z-index:20;position:absolute;background:#FFFFFF;border:1px solid #999999;width:177px;}
 
div.menu:hover div.sousmenu {display:block;}
 
.sousmenu a {display:block;width:171px;padding:2px 2px 2px 4px;text-decoration:none;color:#000000;background-color:#FFFFFF;}
 
.sousmenu a:visited {background-color:#FFFFFF;color:#000000;}
 
.sousmenu a:hover {background-color:#FF6600;color:#FFFFFF;}
 
<!-- Code HTML !-->
<div class="menu">
  <div class="entete_menu">Choisissez une option</div>
    <div class="sousmenu">
      <a id="maValeur_1">Option 1</a>
      <a id="maValeur_2">Option 2</a>			
      <a id="maValeur_3">Option 3</a>
    </div>
</div>

**Bisûnûrs** · 12/10/2008, 15h58

Ouais, enfin un menu déroulant et un select sont deux choses différentes :

- Le select se déroule sur le clic et non sur le hover.
- Le select envoie des données au serveur dans le cas d'une soumission au formulaire.
- Ton "menu" ne fonctionne pas avec IE 6 et inférieurs.

**Valki** · 13/10/2008, 15h27

Bonjour,

un menu déroulant et un select sont deux choses différentes

Oui, je sais bien, mais un menu déroulant peut faire office d'élément de formulaire sans soucis avec du javascript.

Ton "menu" ne fonctionne pas avec IE 6 et inférieurs.

Si, mais il faut ajouter un behaviour dans le fichier CSS, le lien vers ce fichier a été supprimé par un administrateur.

Enfin, c'était juste histoire de tenter d'apporter une autre façon de procéder pour régler le problème de KeKeMaN. Malheureusement, plus j'y réfléchis, moins je trouve ma solution adaptée, puisque l'utilisation de js est quand même requise...

Mauvais comportement des menu déroulant sous IE

HTML

Discussions similaires

Partager

Partager