Comportement etonnant FF

Bonjour,

J'ai le comportement suivant sur FF:
Soit une liste de li en display: inline-block

Au chargement de la page, la largeur des li est, selon les éléments, soit tout juste à la taille du contenu+padding, soit plus grande avec un excédent de taille variable

Si je modifie les styles avec l'inspecteur, dès que je modifie une propriété appliquée, cet excédent disparait et la boite prend la taille contenu+padding

Si je remet la valeur initiale de la propriété modifiée à la volée, l'excédent ne revient pas et la boite reste à la taille contenu+padding

Est ce un bug ? Un comportement explicable ??

Merci pour vos lumières

salut,
on ne pourra pas t'aider sans code.

et voici:

<nav>
	<ul id="hMenu">
		<li><a href="#">Products</a></li>
		<li><a href="#">Technologies &amp; Applications</a></li>
		<li><a href="#">Technical Ressources</a></li>
		<li><a href="#">Ordering Informations</a></li>
		<li>Contact Us</li>
	</ul>
</nav>

header nav {
	clear: left;
}
header li {
	background-image: url(/images/fondDegrade1.jpg);
	background-repeat: repeat-x;
	color: #FFF;
	display: inline-block;
	font-size: 14px;
	font-weight: bold;
	line-height: 34px;
	padding: 0 16px;
	position: relative;
	text-transform: uppercase;
}
header li:first-letter {
	font-size: 18px;
}

Merci

Il semblerait en fait que ça soit un bugg FF qui arrive lorsqu'on combine "font-size+first-letter+display inline-block" soit exactement ce que tu fais !
Faudrait attendre confirmation.

Bonjour,
tu peut essayer de passer tes <a> en inline-block, ou pour toutes :

header li:before {content:'';
display:inline-block;
}

qui devrait éliminer le bug quand le contenu de <li> + :first-letter est juste inline . En modifiant le contexte de formatage, ça devrait remettre les choses theoriquement en ordre .

++

Bonjour,

Merci beaucoup pour cette réponse. Oui, le probleme est corrigé sous FF.
Par contre, effet de bord, la propriété firstLetter n'est plus appliquée (sous aucun navigateur)

Une idée ?

Mais déjà un grand merci, le bug FF est contourné

Ah zut, évidement, le bug est annulé en annulant la condition qui le déclenche. LOL .. on dira que c'est dimanche ... clemence.

En effet....

Par contre, ce que je ne comprends pas c'est le fonctionnement de firstLetter. Pourquoi saute t il ? Dans quels cas est il ou non appliqué ?

Merci

first-letter s'applique en principe sur des element de type block ou inline-block.

Le premier element en ligne est alors mis en boite (inline-block) et peut recevoir un style spécifique, et s'aligner sur le texte avec un décalage verticale si font-size est différent ou que line-height diffère.

tu peut y appliquer margin et padding, float lui fait perdre son comportement de boite en ligne.

En faisant, :before {content:'';display:inline-block;}, cette boite virtuelle prend la place de la première lettre , d’où l'annulation de son effet sur les navigateurs récents et donc du bug pour FF. , display:inline aurait le même effet d'annuler :first-letter

Bizarrement, :first-letter à toujours (eu) des défaut différent d'un navigateur à l'autre.

Décidément, l'effet recherché n'est pas trivial à mettre en place en css pur.
Initialement, j'avais un smallcaps mais il était tellement géré de façon différente en fonction des navigateurs que je me suis rabattu sur un firstLetter

Vais je devoir encapsuler dans l'html la première lettre dans un span avec un font-size plus grand ?

Ca me plait pas trop de modifier l'html pour des histoires d'apparence mais ai je le choix ?

Encore merci

Ps: oui, il y a le choix de développer un petit plugin jquery qui ajoute lui même le span sur la première lettre.... Mais bon, le marteau pilon pour écraser la mouche....

Sinon, tu peut te servir de capitalize et small-caps pour ton effet rechercher en te passant de :first-letter: (small-caps reduit d'environ 16 a 18% la taille de ton texte)

header li {
	background-image: url(/images/fondDegrade1.jpg),
	linear-gradient(0deg,#999,#ccc);
	background-repeat: repeat-x;
	display: inline-block;
	font-size: 18px; /* ici font-size de first-letter  */
	font-weight: bold;
	line-height: 34px;
	padding: 0 16px;
	position: relative;
	text-transform: capitalize; /* ici on garde le font-size a 18px */
	font-variant:small-caps /* ici la taille retombe de a 15px environ */
}

<edit>hum hum , decidement , c'est dimanche
++
Modifié par gc-nomade (29 Sep 2013 - 21:04)