probleme d'affichage sous IE

**nebil** · 04/08/2008, 10h29

Bonjour ,
je cherche une petite aide voila la page qui pose probleme
http://nebilpro.free.fr/ouvert/menu.html

le menu qui apparait sous le lien "suite..." fonctionne tres bien sous FF mais sous IE , apparement il est gener par l'existence d'une div qui se trouve en dessous et qui contient des elements comme les balises select etc..... car quand la div et vide sa fonctionne tres bien et quand il n'y a pas de div sa fonctionne bien aussi .
apres 3 jours de recherche rien trouver ,
quelqu'un a une idée ???

**Ikonic** · 04/08/2008, 18h21

Salut,

apparemment, il te manque le z-index...

**nebil** · 04/08/2008, 20h37

il apparait bien au dessous de tout les autres
c'est bien la fonction premiere de z-index ,

mais je ne comprend pas pourquoi le contenu des div d'en dessous me font disparaitre au survol mon menu !!!

**Ikonic** · 04/08/2008, 23h29

Salut,

Apparemment c'est ici que ça plante

Code :

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

1
2
3
#menu li:hover dl, #menu li a:hover dl {padding-bottom:15px; margin-top:2em;}
#menu li:hover dd, #menu li a:hover dd {display:block;border-bottom: #c9d7f1 thin solid;color:#000000; font:larger; background-color:#999999;
}

rajoute une attribution d'une classe pour la balise dl (par exemple 'taclasse') et définit ainsi dans ton css

Code :

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

1
2
3
#menu li:hover dl, #menu li a:hover dl {padding-bottom:15px; margin-top:2em;}
#menu li:hover dd, #menu li a:hover dd, #menu li dl.taclasse:hover {display:block;border-bottom: #c9d7f1 thin solid;color:#000000; font:larger; background-color:#999999;
}

**nebil** · 04/08/2008, 23h38

voila z-index placer en auto valeur la plus haute , mais rien n'y fait !!!
je ne vois pas mon probleme comme un probleme de profondeur
le z-index fait bien sont travail dans notre cas !! c'est ca qui me perd

**Ikonic** · 04/08/2008, 23h40

j'ai édité mon post
le souci vient du dl où il faut définir une classe pour IE

**nebil** · 04/08/2008, 23h47

j'avais essayer d'encapsuler dl avec un dt mais rien a faire

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
#menu {width:100%;border-bottom: #c9d7f1 thin solid;list-style-type:none; 
margin:0 0 100px 0; padding:0;position: fixed;
top: 0;z-index: 10;
font-family:Arial, Helvetica, sans-serif;font-size:12px;
background-color:#CCCCCC;}
 
#sous_menu_G {width: auto;padding-left: 10px;padding-right: 10px;
float: left;height: 2em;background: #FFF;}
#sous_menu_C {width: auto;padding-left: 10px;padding-right: 10px;
float: left;height: 2em;background:#FFF;}
#sous_menu_D {width: auto;padding-left: 20px;padding-right: 20px;
float:right;height: 2em;background:#FFF;}
 
#menu li {display:block; float:left; position:relative; z-index:auto; 
 
margin-right:1px;}
#menu li span {display:block; z-index:100;
 padding: 5px 10px;
 
font-size:1.1em; 
text-decoration:underline;}
 
#menu li a, #menu li a:visited {display:block; padding:0; white-space:nowrap;}
 
#menu dl {position:absolute; top:0; left:0; margin: 0; padding: 0;
 z-index:auto; }
#menu dd {display:none;  clear:left; margin:0; padding:0; 
color: #fff; font-size: 1em; text-align:left;border: #c9d7f1 thin solid;}
 
#menu dt a, #menu dt a:visited {
display:block; color:#000;
 padding: 5px 10px; text-decoration:none;}
#menu dd a, #menu dd a:visited {
color:#000; text-decoration:none; display:block;
 padding: 5px 10px;}
 
#menu li a:hover {border:0; text-decoration:underline;
background-repeat:repeat;
 
 
}
 
#menu li:hover dl, #menu li a:hover dl {padding-bottom:15px; margin-top:2em;}
#menu li:hover dd, #menu li a:hover dd, #menu li dd.dt:hover {
display:block;border-bottom: #c9d7f1 thin solid;color:#000000;
 font:larger; background-color:#999999;
}

**Ikonic** · 05/08/2008, 01h11

je te parle de classe et non de balise dt...
et la classe c'est pour la balise dl

de plus, dans ta css, ok tu peux utiliser la classe dt si tu veux mais dans ton html c'est pas une balise dt qu'il faut rajouter mais une classe dt à la balise dl...
cette erreur de ta part est tellement énorme que c'est à s'en poser des questions

**nebil** · 05/08/2008, 08h30

ok , c'est une class qu'il faut attribuer a la balise dl mais quel attribut apporter a cette class ?

**Ikonic** · 05/08/2008, 13h37

Code :

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

#menu li dl.taclasse:hover {display:block;}

**nebil** · 05/08/2008, 17h30

cool ,merci Ikonic ,
mais j'ai un petit default qui est apparue , il y a un embrion de dd
qui apparais en fin de calque !!

**Ikonic** · 05/08/2008, 18h55

Code :

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

1
2
3
4
5
6
#menu li:hover dd, #menu li a:hover dd, #menu li dl.dt:hover {
background-color:#999999;
border-bottom:thin solid #C9D7F1;
color:#000000;
display:block;
}

==>

Code :

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

1
2
3
4
5
6
7
#menu li:hover dd, #menu li a:hover dd {
background-color:#999999;
border-bottom:thin solid #C9D7F1;
color:#000000;
display:block;
}
#menu li dl.dt:hover { display: block; }

**nebil** · 05/08/2008, 20h42

on perdu le defaut mais on est revenue case depart ,
je me suis pris la tete 5 jours sur ce truc , j'ai l'impression que je vais jamais en sortir

**nebil** · 06/08/2008, 19h07

**nebil** · 07/08/2008, 18h07

Ikonic tu ma abandonner !!! pourtant c'est un réel probleme

**nebil** · 08/08/2008, 17h43

bon j'ai fini par trouver la solution le

#menu li:hover dl, #menu li a:hover dl.dt:hover {padding-bottom:15px; margin-top:2em; background-color:#0033CC;}

il fallait eliminer le padding-bottom

merci pour ton aide comme meme

probleme d'affichage sous IE

CSS

Discussions similaires

Partager

Partager