jQuery slideDown sous le bouton de menu déplace tous les autres boutons FF

Question

Je travaille sur un menu et faites-le fonctionner parfaitement dans Chrome / Safari. L'URL est http://www.penuli.nl/aboutvanwow.html .

Mais FF me donne du mal avec l'info-bulle. Chaque fois que je hover sur un bouton, tous les autres boutons (qui sont divs l'intérieur d'un élément de la liste) sauter vers le bas au fond de leur parent, l'élément de liste. Je ne comprends pas pourquoi ils le font, puisque tous les éléments sont assez grands pour entrer dans l'autre sans « pousser » d'autres éléments autour.

DANS LA BOÎTE DE COMMENTAIRE EST UN LIEN VERS UNE ILLUSTRATION I MADE SUR LE MENU (Je n'ai pas assez de points de réputation aux images post)

La chose qui le rend peut-être un peu plus compliqué (mais il ne faut pas quelque chose à voir avec elle), est que les boutons animés dans la page. Cela signifie que leur position est relative.

J'ai trouvé une solution grâce à vous les gars de Stackoverflow, lire une autre question, mais cela voudrait dire que je dois modifier mon animation: overflow: hidden fonctionne quand je l'applique à l'élément de la liste, mais j'ai une animation après les événements de clic qui fait tout le bouton « chute » en bas de la page. Quand rien ne fonctionne, je peux d'annuler bien sûr que l'animation, il est plus important que le site fonctionne parfaitement alors une animation plus ou moins, mais une solution qui fonctionne à la fois serait excellent! Merci à l'avance.

---

Certains CSS (sans quelques lignes pour le début et l'animation fin):

#wrap ol#menu{
margin-left: 0;
padding-left: 0;
width: 1000px;
height: 160px;
}

#wrap ol#menu li{
display: inline-block;
list-style-type: none;
width: 138px;
height: 160px;
background-image: url("/images/backgroundbutton.png");
background-repeat:no-repeat;
background-color: white;
cursor: pointer;
position: relative;
z-index: 0;
}

#wrap ol#menu li .button{
width: 138px;
height: 82px;
z-index: 2;
position: relative;
background-repeat:no-repeat;
}

ol#menu li:nth-child(7n+1) .button {
background-image: url("/images/button-1.png");
}

#wrap ol#menu li .tooltip{
background-image: url("/images/tooltip.png");
position: relative;
background-repeat:no-repeat;
top: -30px;
width: 138px;
height: 130px;
z-index: 1;
display: none;
}

Answer 1

faire les éléments de la liste flottante peut résoudre votre problème.

dans la règle de #wrap ol#menu li, échange:

display: inline-block;

avec:

float:left;

(en gardant l'affichage: inline-block est pas un problème, mais il n'est plus nécessaire puisque les éléments sont flottants)

Answer 2

Wow, que est assez bizarre. Peut-être changer vos éléments de liste à une collection de divs?