Problema classi per IE6: .classeUno.classeDue

[99caos]

Ho un problema su IE e non ne capisco il motivo, ci sono delle regole che mi si sovrascrivono.

Ma faccio degli esempi che sono molto più esemplificativi:

html:

<div class='icon mini blog'>
	<div class='iconBg'></div>
</div>

css:

.icon.mini	{ width: 16px; height: 16px; }
.icon.medium	{ width: 32px; height: 32px; }

.mini.blog .iconBg { background: transparent url(blogMini.png) ; height: 16px; }
.medium.blog .iconBg { background: transparent url(blogMedium.png) ; height: 32px; }

la regola da utilizzare sarebbe quella che imposta l'immagine .mini.blog .iconBg ma di fatto accade che viene utilizzata la regola .medium.blog .iconBg

invece la regola .icon.mini viene utilizzata in maniera corretta.

il risultato quindi è un box di width: 16px (regola .icon.mini) e height: 32px (regola .medium.blog .iconBg).

su FF e IE7 il problema non sussiste.

sapete dirmi come aggirare l'ostacolo senza dover riscrivere tutti gli elementi html?

[gra-fichetto]

Inverti la successione delle regole.

.icon.mini	{ width: 16px; height: 16px; }
.icon.medium	{ width: 32px; height: 32px; }
.medium.blog .iconBg { background: transparent url(blogMedium.png) ; height: 32px;}
.mini.blog .iconBg { background: transparent url(blogMini.png) ; height: 16px; }

[99caos]

e se poi mi servisse l'altro?

il problema resta.... ugh!

[Mich_]

Non ho capito il senso di quei selettori.

Nel codice HTML hai definito classi multiple per alcuni oggetti. Questo e` possibile (ancorche` non riconosciuto da tutti i browser, mi risulta), per poter assegnare stili simili ad oggetti diversi.
Esempio:
<div class="blocco sinistra alto"> ...</div>
<div class="blocco sinistra basso"> ...</div>
<div class="blocco destra alto"> ...</div>
<div class="blocco destra basso"> ...</div>

dove a tutti i "blocco" si assegna uno stile generico, e poi ai due alto si assegnano dei margini opportuni, idem ai due basso ecc.

---
Nel tuo caso hai assegnato le classi icon, mini e blog.
I selettori dei CSS pero` sono sbagliati.
Anzitutto la scritta
.icon.mini { ... }
non mi risulta corretta.
Sarebbe corretto scrivere:
.icon .mini {...} (l'oggetto con classe mini dentro il blocco con classe icon)
oppure
.icon, .mini {...} (gli oggetti con classe mini e gli oggetti con classe icon)
ma nel tuo caso non corrisponde all'HTML.

Cercando di interpretare il senso del tuo codice potrebbe essere ragionevole:

.icon { .... }
.mini	{ width: 16px; height: 16px; }
.medium	{ width: 32px; height: 32px; }
.iconBg { background: transparent; }
.mini .iconBg { background: url(blogMini.png); }
.medium .iconBg { background: url(blogMedium.png); }

Comunque il tutto non spiega i problemi di sovrapposizione.
Sospetto un altro errore, magari dato da posizionamenti assoluti.

[gra-fichetto]

Originariamente inviato da 99caos
e se poi mi servisse l'altro?

il problema resta.... ugh!

sapete dirmi come aggirare l'ostacolo senza dover riscrivere tutti gli elementi html?

Credevo non volessi o potessi toccare il codice pagina e che il problema riguardasse solo la necessità di quelle due classi. Al limite si dovrebbe vedere l'intero documento.

[99caos]

ma questo significa che IE6 non capisce nulla dei selettori di classe accostati

in pratica per lui non fa differenza tra

.classeUno.classeDue altroSelettore

e

.classeTre.classeDue altroSelettore

lui vede giusto se altroSelettore ha un parente che contiene una delle succitate classi... ma che maleducato!!!