Liste qui se décale au :active sur chrome

Bonjour,

J'ai un petit mystère que je n'arrive pas à résoudre sur mon site:
spectaclesalondres.fr

Le style est basé sur Twitter Bootstrap, avec pas mal de modifications.

Sur le menu, quand je clique sur "spectacles", puis sur n'importe quelle option du sous-menu qui apparaît (en cliquant sur une option de la liste non-ordonnée à droite, c'est plus flagrant), mes listes se décalent et l'une passe sous l'autre. Comme si une margin ou un padding s'ajoutait au :active, mais impossible de savoir sur quel élément cette largeur supplémentaire s'applique.

Le plus curieux, c'est que j'ai le problème sur chrome mais pas sur firefox...

Quelqu'un aurait-il un début de piste ? Je sèche.

Merci

Bonjour,

Quand tu dis bootstrap avec pas mal de modifications... tu veux dire que tu as modifié le css de bootstrap directement?

Peux tu nous donner les lignes css qui correspondent à cette liste? J'ai vu effectivement ton site et le problème que tu évoques. Apparement le <li> du sous menu est lors du premier clic large de 210px pour être ensuite de 216px lorsqu'il passe sous l'autre menu... maintenant à savoir pourquoi il faudrait plus de détail sur ton code css

Je sais pas si c'est ça ou non, mais j'ai detecté cette ligne qui à l'air d'e**** dans le fichier css :
bot 8-1.7.css

Quand je l'enlève sur chrome tout se recale normalement. Ptetre que...

media="screen"
ul, ol {
padding: 0;
margin: 0 0 10px 25px;
}

Bonsoir, et merci pour vos réponses.

Peter-L a écrit :
Quand tu dis bootstrap avec pas mal de modifications... tu veux dire que tu as modifié le css de bootstrap directement?

Non, j'ai ajouté ma custom.css après celles du bootstrap.

Peter-L a écrit :
Apparement le &lt;li&gt; du sous menu est lors du premier clic large de 210px pour être ensuite de 216px lorsqu'il passe sous l'autre menu... maintenant à savoir pourquoi il faudrait plus de détail sur ton code css

Oui, c'est le problème que j'ai relevé. Je ne trouve rien dans ma css qui justifie cela, du coup je me demande si ça ne vient pas des css du bootstrap.

artsx a écrit :
Je sais pas si c'est ça ou non, mais j'ai detecté cette ligne qui à l'air d'e**** dans le fichier css :
bot 8-1.7.css

Quand je l'enlève sur chrome tout se recale normalement. Ptetre que...

media="screen"
ul, ol {
padding: 0;
margin: 0 0 10px 25px;
}

Je vais creuser de ce côté, c'est du bootstrap ça...

Ca ne résout pas mon problème.

Qu'utilisez-vous pour débugger sur Chrome? J'ai Firebug lite, mais ce n'est pas aussi efficace que sur firefox car ça ne montre pas les margins/padding graphiquement.

Avant le clic, les <li> contenus dans le <ol> font 222px de large (zéro padding, zéro margin), au clic les <li> font 238px de large (toujours zéro padding, zéro margin). Le <a> est dimensionné automatiquement, il reste donc à 222px de large avant comme après le clic.

Les <li> contenus dans le <ul> restent toujours à la même largeur, avant comme après le clic (150px).

La largeur des <li> contenus dans le <ol> change même si le clic a lieu sur un <li> de la liste <ul>.

Le margin-left:25px n'est donc pas la source du problème.

Y'a vraiment un truc qui m'échappe...
Modifié par effisk (05 Dec 2013 - 22:31)

Bonjour,
Si tu enlèves le box-sizing à la ligne 822 dans bot_8-1.7_fr.css ça règle ce soucis chez moi...
Ne le supprime pas définitivement, ça pourrait créer d'autre problème ailleurs. Mais si c'est ça, je te propose de surclasser avec la propriété inherit

.navbar .dropdown-menu {
...
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}

Sais-tu faire le test ?

Ca ne règle pas le problème. La deuxième liste ne saute plus à la ligne, mais elle continue à se décaler vers la droite au clic sur un lien... juste pas suffisamment pour sauter à la ligne (le box-sizing:border-box réduit artificiellement la largeur disponible, ce qui explique que ça saute à la ligne plutôt que simplement se décaler)

Je ne comprends pas pourquoi ces <li> s'élargissent au clic, comme si un padding-right supplémentaire apparaissait... et seulement sur Chrome.