Astuce: pseudo-élément :first-letter, balise <a> et Firefox

Salut à tous!

C'est mon tout premier message sur le forum d'un site dont je suis un admirateur: ça s'arrose!

Partons du fait que l'on veut construire une liste de liens dont la première lettre doit être valorisée par une couleur différente.

En bon codeur de (X)HTML, on tape le code suivant:

<ul id="menu">
  <li><a href="lien1.html">Lien 1</a></li>
  <li><a href="lien2.html">Lien 2</a></li>
  <li><a href="lien3.html">Lien 3</a></li>
  <li><a href="lien4.html">Lien 4</a></li>
  <li><a href="lien5.html">Lien 5</a></li>
</ul>

Passons aux CSS.

#menu, #menu a {
  text-decoration: none;
  color: green;
  background: white;
}
#menu li:first-letter {
  color: #FF6215;
  background: white;
}

En essayant ces codes sous Internet Explorer (6) et Opera (9), tout va bien. Sous Firefox, tout va bien aussi... sauf quand on passe le pointeur de la souris sur les liens: la nuance d'orange cède la place au vert!

Eh oui! pour une fois, c'est Firefox qui fait pâle figure à côté d'IE et non l'inverse.

Pour y remédier, enrichissons la feuille de style en tapant le code suivant.

#menu a:first-letter {
  color: #FF6215;
  background: white;
  float: none;
}

Le pseudo-élément :first-class peut être appliqué aussi bien aux balises de bloc qu'à celles en ligne. Mais, pour qu'il ait un comportement "en ligne", il faut déclarer la propriété float: none.

Ainsi, Firefox maintient le bel orange, même quand la souris chatouille le lien.

Si jamais quelqu'un d'autre a déjà traité de ce sujet ici, je m'en excuse.

Bonjour, j'ai été confronté une fois à un problème de lettrine, mais je ne sais plus si cette idée vient de moi ou de mes collègues:

<p class="paragraphe"><span class="lettrine">P</span>remier paragraphep>

.lettrine{
	font-family: "Times New Roman", Times, serif;
	font-size: 48px;
	color: #336699;
   background-color: #f5f5f5;
}

C'est sans doute moins bien mais bon c'est une solution aussi.

Malgré tout, je retiens ton astuce, sans doute me servira-t-elle plus tard.

A+