Décalage à cause du titre

[captain_torche]

Je suis en train de refondre la désastreuse liste de membres de mon site, et j'éprouve un petit souci :

Chaque inscrit est dans un élément de liste li, auquel j'ai attribué le style "display: inline-block".

Tout se comporte normalement, à part le titre h2 contenant le pseudo, qui force l'élément suivant à se déplacer légèrement vers le bas, ruinant la mise en page.

Ce que j'ai essayé :

- Passage du h2 en largeur fixe, moindre que celle du li -> aucun effet

- Passage du h2 en display: inline -> aucun effet

- Passage du 2h en display: inline-block -> idem

Auriez-vous une idée de la marche à suivre ?

J'en profite pour préciser que chaque élément de la liste était auparavant en display: block et float: left, et que ça fonctionnait très bien, mise à part la bordure basse de la page, qui ne se retrouvait pas décalée.

L'url de la page de test : -http://www.lonironaute.net/membres.html?dev

[Valtiel]

Et bien, c'est un problème bien étrange... As-tu essayé de mettre un texte normal à la place d'un titre H2 pour les pseudo' juste histoire d'avoir une piste ?

[Dadou]

Je n'utilise jamais le inline-block, je met les li en block et flottant à gauche

[Sarc]

Bug bien étrange, en effet.

Tu me dis si je me trompe, mais j'ai pas l'impression que le h2 y soit pour quelque chose : si tu laisses le lien en virant toute balise (les h2 dans ton cas), ça reste décalé, non ?

Tout ça pour dire que je suis étonné.

Comme Dadou et toi, je suis plutôt habitué à du block avec un float.

Pour décaler la bordure, il suffit de rajouter un clear:both en fin de page.

[captain_torche]

Je sais pour le clear: both, mais je voudrais trouver une solution sans balise inutile (Pour la beauté du geste).

Sinon effectivement, le h2 n'est pas en cause : si je rajoute un paragraphe pour les éléments de la liste qui n'ont pas de lien "dernier rêve", tout remarche ... J'aimerais bien comprendre ce qui bloque

[baulet]

ca ne serait pas qu'il manque la <legend> dans ton <fieldset> qui met l'explorer en mode quirks?

sinon je ne vois pas...

[captain_torche]

Effectivement, ça génère une erreur. Je corrigerai ça ce midi, et on verra si ça change quelque chose.

[Dadou]

ca ne serait pas qu'il manque la <legend> dans ton <fieldset> qui met l'explorer en mode quirks?

Non, le problème du mode quick ne devrait être que sous IE, alors que le problème est aussi sous firefox.

Le display : inline-block est mal géré par les navigateurs

[captain_torche]

J'ai testé en ajoutant les balises legend, mais ça n'a rien changé.Par contre, je viens de trouver !

En désactivant la largeur et la hauteur dans les CSS, je me suis rendu compte que les blocs étaient alignés ... vers le bas !

Il suffisait donc d'ajouter un vertical-align: top; dans la CSS, et le tour est joué

En ce qui concerne IE et sa méconnaissance du display: inline-block; j'ai fait un petit hack pour lui afin qu'il mette tout en flottant. Comme il décale bien la bordure après, tout va pour le mieux

Merci à tous de m'avoir mis sur la voie !

[baulet]

Non, le problème du mode quick ne devrait être que sous IE, alors que le problème est aussi sous firefox.

firefox a aussi un mode quirk...et je pense tous les explorateurs?

éclaires moi un peu la dessus

[Dadou]

Oui, sauf que Firefox lui tente quand même de respecter les standards alors que IE pête totalement les plombs

[baulet]

ahh ok merci !

[captain_torche]

Oui, en toute logique, le mode quirks ne se lance que si le doctype est mauvais ou absent, pas quand il y a des erreurs de codage.