first-letter e Firefox hanno dei problemi???

[ilpiubello]

Ciao,
mi sta succedendo una cosa che non capisco.

Voglio aggiungere lo pseudo-elemento first-letter ai titoli che sono presenti all'interno di un dato div e sto usando questa regola:

.listed h2:first-letter{
color: #ff0000;
}

Ma su Firefox non funziona!

Se invece la dichiarazione la rendo "globale", funziona ma, naturalmente, a me serve che vada solo sui titoli che decido io.

Idee sul motivo e su una soluzione?

Grazie.
Fabio

[Experiment8]

Ciao,

Posteresti anche il resto del codice?

Grazie

[ilpiubello]

Dovrei postare 800 righe + vari fogli satelliti, non mi sembra il caso...

Queste sono le regole principali:

.cf:after,
.cf:before {
	content: "";
	display: table;
}
.cf:after {
	clear: both;
}
.cf {
	zoom: 1;
}
.wrapper {
	margin: 0 auto;
	width: 940px;
	position: relative;
}
body {
	font-family: Arial, sans-serif;
	font-size: 13px;
}
body a {
	text-decoration: none;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
body p {
	margin-bottom: 21px;
	padding: 0 15px;
}
#main h1,
#main h2,
#main h3,
#main h4,
#main h5,
#main h6 {
/*	text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);*/
}
#main,
footer {
	line-height: 1.5em;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: 1.1em;
}
h1 {
	font-size: 35px;
}
h2 {
	font-size: 20px;
	padding: 12px 15px;
	border-bottom: 1px solid #d6d6d6;
}
h3 {
	font-size: 18px;
	padding: 15px 15px 5px 15px;
}
h4 {
	font-size: 17px;
}
h5 {
	font-size: 15px;
}
h6 {
	font-size: 14px;
}
strong{
	font-weight: bold;
}
.alignleft {
	float: left;
	margin: 5px 10px 5px 0;
}
.alignright {
	float: right;
	margin: 5px 0px 5px 10px;
}
.left{
	text-align: left;
}
.right{
	text-align: right;
}
.center{
	text-align: center;
}
.justify{
	text-align: justify;
}
.section-div {
	height: 54px;
	border-top: 1px solid #ccc;
}
.bordered{
	padding: 1px;
	background: #ffffff;
	border: 1px solid #cccccc;
}
.no-margins{
	margin: 0;
	padding: 0;
}
.image-shaded{
	text-align: center;
	line-height: 0;
}
.image-shaded img{
	margin: 0 auto;
	max-width: 100%;
	height: auto;
}
.error_message {
	background-color: #ffe9e9;
	border-color: #fbc4c4;
	border-image: none;
	border-style: solid;
	border-width: 1px 1px 1px 5px;
	color: #de5959;
	font-size: 12px;
	line-height: 18px;
	margin-bottom: 15px;
	padding: 15px 40px 15px 18px;
	position: relative;
	float: none;
	width: auto;
}

Ho controllato e ricontrollato tutto, non ho altre regole con quel pseudo-elemento....

[ilpiubello]

Credo di aver trovato il problema...

Anche se non capisco perché solo su Firefox non interpreta il mio first-letter.


Il div che contiene anche i titoli incriminati ha più class associati e sembra sia propria questa la criticità. Eppure non c'è niente che mi vada a sovrascrivere quanto dichiaro

[Mich_]

Hai gia` fatto una verifica sintattica di tutto il codice?
FF e` piu` severo di IE riguardo agli errori di sintassi.

Prova a passare dai validatori (riferimenti tra i "link utili").

Se ancora non trovi, prova ad aggiungere un altro attributo CSS allo stesso elemento, nello stesso posto e vedi se i browser rispondono tutti a quella variazione.
(devi stabilire con certezza se l'errore e` dato dal :first-letter oppure puo` essere da qualche altra parte - ad esempio nella sintassi CSS qualche riga sopra)

[ilpiubello]

Ciao.
Gli unici errori che mi da il validatore sono riferiti ai vari hack per explorer (tipo "zoom:1")...


Come detto sopra, Firefox non riesce ad interpretare:

classtre h2:first-letter{
	color: red;
}

in questa situazione:

<div class="classuno classdue classtre">
<article>
<h2>Titolo con prima lettera in evidenza</h2>


Lorem ipsum dolor</p>
</article>
</div>

[Mich_]

Spero che ci sia il punto davanti a classtre nel CSS ...

E hai provato a scrivere nell'HTML
<div class="classtre classuno classdue">

E hai provato a lasciare degli spazi in piu`
<div class = " classuno classdue classtre "> (ora ho esagerato, ma sono varie prove che puoi fare)

E hai provato su altri browser FF (su macchine diverse)?
(potrebbe essere un problema di quella versione di FF o di quel PC specifico, o di quel sistema operativo)


Come vedi sto sparando idee nel buio, ma e` per aiutarti a individuare il problema con maggior specificita`.

E mi viene in mente che FF ha un sito dove sono segnalati i bug ... magari c'e` anche il tuo (non ricordo l'indirizzo, ma qualcuno lo aveva segnalato in questo forum qualche tempo fa - forse era bugfix)

[Experiment8]

A mio parere hai una classe più avanti in uno dei tuoi CSS che da la formattazione di testo all'elemento h in se, e questo fa si che Firefox sovrascriva anche la regola del first-letter perchè magari di un livello di priorità più basso e precedente, controlla tutte le formattazioni di quell'elemento più avanti nei CSS e aggiungi la regola per il first-letter solo "in fondo".