[Résolu] First-Letter & font-size

Bonjour à tous,

J'ai un problème en IE et pas en FF avec le first-letter.

Voici mon CSS

#menu {
  height:400px;
  width:200px;
  background-color:#ffd34f;
  float:left;
  text-align:left;
}
#menu H1 {
  font-weight: bold;
  font-size:16px;
  letter-spacing: 4px;
  margin: 0px 20px 0px 20px;
  color:#b29437;
}

#menu H1:first-letter {
  font-weight:lighter;
  font-size:40px;
  color:#403e3b;

}

et mon résultat en FF (nickel !)


mon résultat en IE (pas nickel !)


Pouvez-vous me dire pourquoi il ne tient pas compte du font-size mais bien du color

Merci d'avance
Laurent
Modifié par StudioTchio (06 Mar 2006 - 15:41)

Bonjour.
Je crois que first-letter ne fonctionne pas tres bien avec IE. Il existe des techniques de contournement, comme expliqué dans Ce Forum.

Là, ils entourent dans le code HTML la première lettre par un

<span class="lettrine">U</span>

et appliquent les propriétés ensuite.
Modifié par carobee (06 Mar 2006 - 12:27)

Merci mais ta solution ne m'arrange pas dans le sens où j'utilise un CMS qui me rajoute des titres en H3 mais je ne peux pas lui indiquer qu'il doit entourer la première lettre.

Le pire c'est que si je mets ça :

H1:first-letter {
  font-weight:lighter;
  font-size:40px;
  color:#403e3b;

}

ça marche mais évidemment pour tout les H3 ce qui ne m'arrange pas non plus

C'est peut-être une question de priorité des sélecteurs.

Essaye les déclarations suivantes :
H1:first-letter ou div#menu H1:first-letter

Raphael,

Le H1:first-letter marche ... mais ... il m'applique le format pour tous les H1 de mon document ce qui n'est pas ce que je souhaite.

le div#menu H1:first-letter quant à lui me donne le même (mauvais) mauvais résultat.

Une autre idée ?
Laurent

J'ai trouvé !!!

J'avais mis un sélécteur universel

* {
   ...
   font-size:11px
   ...
}

et visiblement le first-letter n'aime pas le sélecteur universel.

Je mets un résolu et je sors ... Merci à tous