Discussion :

[jojodivx]

Bonjour.

J'ai un menu déroulant entièrement en CSS qui s'affiche correctement sous firefox mais qui est complètement décalé sous IE7.
C'est un menu déroulant horizontal que j'ai repris sur le site.

Sauriez-vous m'indiquer ce que je dois changer pour ne plus être embêté par ce décalage ?

Mon site est celui-ci et le menu déroulant est sur le bouton "les équipes".

D'avance merci.

[Bisûnûrs]

Je vois plusieurs erreurs dans ton code.

Déjà, tu utilises un id qui se répète : menu. Or, un id est, comme son nom l'indique, un identifiant, ton unique.

Ensuite, il faut savoir que ce menu déroulant ne fonctionne pas sur IE6 (et 7 ?) qui ne connaît pas la syntaxe

Code :

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

li:hover > .sousMenu { display: block; }

Enfin tu mets ton menu déroulant en position absolue, mais par rapport à quoi ? Ce sont les sous-menus qui doivent être en absolu.

[jojodivx]

Tout d'abord merci puisque j'ai résolu une partie de mon problème.

En mettant le sous-menu en absolu mon en-tête de colonne retrouve sa place dans IE7. Le seul problème c'est que le sous-menu n'a pas suivi et il reste décalé.

Pour ce qui est de l'id, "menu" est unique ainsi que "menuderoulant".

Je tiens à préciser que je ne connais pas grand chose au css et pour ta question :

Enfin tu mets ton menu déroulant en position absolue, mais par rapport à quoi ? Ce sont les sous-menus qui doivent être en absolu.

je n'ai aucune réponse sinon que cela me plaçait bien mon en-tête de menu sous firefox, mais j'avoue qu'il n'y a aucune logique dans ma démarche.

Tu as aussi vu plusieurs erreurs. Quel genre d'erreur s'agit-il ?

[Bisûnûrs]

Pour ce qui est de l'id, "menu" est unique ainsi que "menuderoulant".

Dans ton code HTML, menu n'est pas unique :

Code html :

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

1
2
3
<td width="100" height="33" align="center" valign="middle" id="menu"><a href="index.html">Accueil</a></td>
<td width="100" height="33" align="center" valign="middle" id="menu"><a href="club.html">Le club</a></td>
<td width="100" height="33" align="center" valign="middle" id="menu">

Pour corriger le placement du sous-menu, rajoute

Code :

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

position:relative;

à ton menuDeroulant et

Code :

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

1
2
top:33px;
left:0;

à ton sous-menu.

Ensuite, il faut savoir que IE ne reconnaît pas non plus la pseudo-class hover sur autre chose que les liens, donc il ne change pas le background au suvol avec cette syntaxe :

Code :

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

#menu:hover{ ... }

[jojodivx]

En fait j'ai enlevé le "top" et rajouté le "left" et tout rentre dans l'ordre

Maintenant question bonus ^^ :
Le premier choix de mon menu déroulant est vide avec une hauteur de 5px, ce qui me permet d'avoir mon premier lien visible juste en-dessous de mon bouton.
Le problème c'est que IE7 n'en tient pas compte. Ma solution étant du bricolage je pense qu'il en existe d'autres mais je ne vois pas trop comment faire.

Enfin vous m'avez déjà grandement aidé et promis je change, presque, tous mes "id" par des "class" ^^.