problème de balise "hover"

**titounnette** · 18/12/2007, 17h31

Salut!

Je fais appel à vous après plusieurs jours de recherches infructueuses à propos d'un souci de mise en forme CSS.

En fait, j'ai un menu qui fonctionne essentiellement grâce aux balises de listes "ul" et "li". Chaque rubrique contient des sous rubriques que je souhaite afficher uniquement lorsque je survole la rubrique principale. J'utilise donc #active:hover li {display:inline}.

Mon soucis est que cela fonctionne très bien sous Mozilla et Opéra mais pas IE7.

Je mets mon code à dispo pour que vous puissiez y voir plus clair.

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
<style>

#linklist
{
	list-style-type:none;
	color: none;
	background-color:orange;
	margin:5px;
	position: absolute;
	left: 40px;
	top: 93px;
}

#active li { display: none; }
#active:hover li { display: inline; } / Voilà le sujet de discorde avec IE7



#link a
{
color: gray;
background-color: none;
width: 120px;
display: block;
margin: 10px 10px 0 0;
}

#link a:visited
{
color: yellow;
background-color: none;
}

#link a:active
{
color: blue;
background-color: white;
width: 100px;
}

#link a:hover
{
color: red;
background-color: none;
}

</style>

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
<table height="516" name="left">
<tr>
<td background="images/milieu.jpg" width="250" height="510" align="left" valign="top">
 
<div id="link">
 <ul id="linklist">
     <li id="active"><a href="accueil.html" id="current" target="right">Accueil</a></li>
     <li id="active"><a href="#" id="current">item 2</a>
	<ul id="subnavlist">
	  <li id="subactive"><a href="presentation.html" id="subcurrent" target="right">sous item1</a></li>
	   <li><a href="expertise.html"   target="right">sous item2</a></li>
	   <li><a href="competences.html" target="right">sous item3</a></li>
	   <li><a href="references.html"  target="right">sous item4</a></li>
	 </ul>
        </li>
	<li id="active"><a href="#">item3</a>
	   <ul id="subnavlist">
            <li id="subactive"><a href="equipe.html" id="subcurrent" target="right">sous item1</a></li>
            <li><a href="#">Subitem two</a></li>
	    <li><a href="#">Subitem three</a></li>
	    <li><a href="#">Subitem four</a></li>
        </ul>
	</li>	
<div>
</td>
</table>

Est ce que quelqu'un aurait une idée pour m'aider à résoudre ce problème svp.

Merci d'avance

**_Mac_** · 19/12/2007, 12h01

Envoyé par titounnette

Mon soucis est que cela fonctionne très bien sous Mozilla et Opéra mais pas IE7.

Et oui !!! Encore une innovation Microsoft : IE ne sait pas gérer le hover ailleurs que sur les liens, même si le hover fait partie de la spec CSS 2 depuis un paquet de temps

Du coup, t'as pas d'autre choix que de faire de la bidouille en JavaScript pour surveiller l'élément survolé par la souris et afficher ou masquer les menus en fonction.

**pop_up** · 19/12/2007, 14h09

Sinon il y a aussi des astuces pour IE en imbriquant le menu dans un tableau mais je trouve pas ça tres propre.

regade ici si tu trouves ce que tu veux.

**titounnette** · 19/12/2007, 16h30

Ok!!!!

Merci pour les conseils!
Le javascript c'est pas mon truc mais va falloir s'y faire.
Je vais aller faire un tour sur ton lien pop_up

**Candygirl** · 19/12/2007, 17h56

Envoyé par titounnette

Mon soucis est que cela fonctionne très bien sous Mozilla et Opéra mais pas IE7.

Envoyé par _Mac_

IE ne sait pas gérer le hover ailleurs que sur les liens

Il est précisé ici que le problème apparait sur IE7. Hors s'il est vrai qu'IE6- ne gère le :hover que sur l'élément a, IE7, lui, est censé le prendre en compte correctement.

Il y a donc un autre problème pour que le code ci-dessus ne fonctionne pas sur IE7.

J'ai relevé quelques omissions dans le code:

Code :

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

1
2
3
4
5
6
7
8
<style type="text/css">

</ul>
	</li>
</ul>
</div>
</td>
</table>

Une des raisons probables pour que cela ne fonctionne pas sur IE7 est qu'il soit en mode quirks pour cause d'absence de doctype.

Maintenant il est clair qu'il faudra gérer le cas IE6-

**titounnette** · 20/12/2007, 09h33

Salut candygirl,

D'une part, merci pour la correction du code. par ailleurs, même en ayant oublié le doctype, cela ne fonctionne pas.
Que faire??????

**Candygirl** · 20/12/2007, 09h40

Envoyé par titounnette

même en ayant oublié le doctype, cela ne fonctionne pas.

C'est justement l'absence de doctype qui peut faire que cela ne fonctionne pas sur IE7. Ajoute un doctype complet et crrecte tout en haut de ton document et ton menu devrait se dérouler sur IE7.