28220 sujets

CSS et mise en forme, CSS3

First-letter : problème sous Firefox et Camino

Hello tout le monde,

J'ai un problème avec le "first-letter". Je vous invite à regarder Jeux de Maux (pas avec IE sous Windows et si c'est le cas, soyez indulgent lol). Au passage, je suis sous Mac avec Safari, Camino et Firefox.

Pour chaque billet, j'ai une lettrine en début de message (chapo et contenu). Sous Safari, tout se passe bien. Par contre sous Firefox et Camino, le style n'est pas appliqué.

Le code css est le suivant ;

.post-chapo:first-letter, .post-content:first-letter{
font-size:3em;
color: #D813A3;
}


Par contre, si je mets le tout simple

.p:first-letter{
font-size:3em;
color: #D813A3;
}

Le style est pris en compte mais il s'applique évidemment partout et bien sûr là où je ne veux pas.

Donc, savez-vous ce qui cloche ? Smiley sweatdrop
Modifié par LittleBlackCat (07 Oct 2005 - 16:32)
Hello

As-tu essayé de préciser : 
p.post-chapo:first-letter, p.post-content:first-letter{
font-size:3em;
color: #D813A3;
}


Je dis ça au cas où car j'ai jamais réussi à utiliser le first-letter ou first-child...
Modérateur
salut,
c'est plutot comme ça:
div.post-content  p:first-letter, div.post-chapo p:first-letter{
	font-size:3em;
	color: #D813A3;
}


(.post-chapo, n'existe pas dans ta page en lien)
a plus
ah ben non ça marche pas parce que ça me l'ajoute à tous les P du post-content et du post-chapo. Smiley ohwell
Modifié par LittleBlackCat (07 Oct 2005 - 16:12)
Humm c'est bizarre parce que dans la source, je me retrouve avec des blocs du style


<div class="post-chapo"><p>tagada</p></div>


Si j'enlève le p, ça marche sous Firefox et Camino. Par contre si je le laisse, il arrive pas à interpréter. Le problème c'est que je ne peux pas mettre une class comme tu l'as suggéré gcyrillus parce que sinon à chaque début de paragraphe se retrouve avec une lettrine et je veux juste que ce soit sur la première lettre du chapo s'il existe et sur la première lettre du contenu.
Modifié par LittleBlackCat (07 Oct 2005 - 16:21)
A priori, Firefox supporte très bien :first-child

Le problème viens sans doute d'un conflit de style quelque part ! Essaye de désactivé tes regles de style une à une jusqu'a trouvé là ou ça coince... la première chose à testé etant une feuille de style qui ne contiens que les règle que tu nous à montré pour s'assurer que tout va bien.

Dans tous les cas, pour t'aider plus, ce serait bien si on pouvait avoir ton code complet (HTML + CSS), ou mieux, un lien vers une page d'exemple Smiley cligne
solution pas tres nette mais qui doit marcher
<p> <span class="lettrine">t</span>u testes</p^>
Bonjour,

.post-chapo [b]p:[/b]first-letter, .post-content [b]p:[/b]first-letter{
	font-size:3em;
	color: #D813A3;
}


Par contre, ce n'est pas une qestion de cascade ou de priorité des sélecteurs CSS, mais d'implémentation (assez tordue, d'ailleurs).
Modifié par Laurent Denis (07 Oct 2005 - 17:14)
Laurent, ça ne peut pas aller non plus (comme je l'ai dit plus haut) parce que ça impose le style sur toutes les premières lettres de toutes les paragraphes et ce n'est pas ce que je veux.

Je veux juste que la lettrine soit sur la première lettre du chapo et/ou du contenu. Smiley cligne

Donc j'en reste au même point.

Je chercherai sur le W3C pour voir comment ça doît être implémenté (Safari fait peut-être des siennes !) et contacterai Bugzilla si c'est un p'tit soucis avec Gecko.

Merci quand même.
LittleBlackCat a écrit :

Je veux juste que la lettrine soit sur la première lettre du chapo et/ou du contenu. Smiley cligne


Les sélecteurs CSS de premier enfant (p:first-child:first-letter) ne sont pas suffisamment implémentés pour te permettre de le faire, dans IE en particulier.

Définir une classe pour les paragraphes concernés, et appliquer comme ci-dessus pour la classe concernée.
Modifié par Laurent Denis (09 Oct 2005 - 12:29)
Sujet clos
Aller à