problema width in Explorer

[rb10]

ciao a tutti, ho un problema con la seguente proprietà css


.classe1 div { float:left}
.classe2 { width: 30%}


ovviamente classe1 contiente 3 div classe 2

<div class="classe1">
<div class="classe2"></div>
<div class="classe2"></div>
<div class="classe2"></div>
</div>


in questo modo inserendo 3 box vengono mostrati perfettamente in tutti i browser, tranne in internet explorer dove vengono mostrati con larghezze differenti e uno sotto l'altro.

come mai, da cosa potrebbe dipendere?
grazie

[Prill]

Quando si usano per degli elementi dei selettori discendenti, ma poi si sovrascrivono le impostazioni con altre regole che non fanno uso di selettori discendenti possono generarsi questi problemi. Dovresti dunque avere:

.class1 .class2 {width:30%}

Ma in realtà non ti servono due regole per formattare uno stesso elemento, quindila larghezza potrebbe andare direttamente in .classe1 div

[rb10]

Quando si usano per degli elementi dei selettori discendenti, ma poi si sovrascrivono le impostazioni con altre regole che non fanno uso di selettori discendenti possono generarsi questi problemi. Dovresti dunque avere:

.class1 .class2 {width:30%}

Ma in realtà non ti servono due regole per formattare uno stesso elemento, quindila larghezza potrebbe andare direttamente in .classe1 div

Grazie per la risposta, ma io vorrei che classe1 prendesse tutta la larghezza disponibile quindi 100%...nel modo che mi suggerisci tu potrebbe funzionare lo stesso?

[rb10]

Grazie per la risposta, ma io vorrei che classe1 prendesse tutta la larghezza disponibile quindi 100%...nel modo che mi suggerisci tu potrebbe funzionare lo stesso?

adesso ho creato questo e sembrerebbe funzionare

.classe1 { width: 100%}
.classe1 div { float:left; width: 32.7%; margin-right: 0.63%; background-color:#F00}


@media (max-width: 720px) {

.classe1 div { float:left; width: 100%; margin-right: 1%; background-color:#F00; margin-bottom: 5px}
}


PS: ti voglio fare una domanda, esiste un modo per scrivere un codice CSS per Explorer 10 e 11?
Con le versioni precedenti si poteva fare, ma queste nuove pare non supportino più i commenti condizionali.

grzie

[rb10]

adesso ho creato questo e sembrerebbe funzionare

.classe1 { width: 100%}
.classe1 div { float:left; width: 32.7%; margin-right: 0.63%; background-color:#F00}


@media (max-width: 720px) {

.classe1 div { float:left; width: 100%; margin-right: 1%; background-color:#F00; margin-bottom: 5px}
}

se invece volessi creare un div del 33% ed uno del 66% in che modo sarebbe possibile?

[rb10]

Mettendo dei reset giusti non dovresti avere problemi di compatibilità. In ogni caso, rispondendo alla tua ultima domanda, le classi sono per gli elementi che hanno gli stessi codici css, se devi fare una cosa personalizzata usa l'id. Ad un ID metti width:66% , nell'altro width:33%. Ovviamente nel caso in cui non ci siano margin, border o padding, altrimenti devi considerare anche loro nelle percentuali.

grazie per la risposta, invece per quanto riguarda i commenti condizionali in internet explorer 10 e 11 esiste un modo per scrivere un codice css personalizzato?

grazie

[Experiment8]

Ciao rb10,

in realtà no, i commenti condizionali non sono piu' supportati, e non ci sono strade "semplici" per farlo, potresti usare uno script per cambiare una classe a seconda del browser, ma te lo sconsiglio.
Ti sconsiglio di farlo in ogni caso perché IE10 e 11 hanno veramente una buona flessibilità rispetto ai predecessori, è difficile che riscontri problemi su cose semplici come quella dei tuoi tre div in float, se gli riscontri fammi sapere esattamente quali in modo che ti possa chiarire il problema.

[rb10]

Ciao rb10,

in realtà no, i commenti condizionali non sono piu' supportati, e non ci sono strade "semplici" per farlo, potresti usare uno script per cambiare una classe a seconda del browser, ma te lo sconsiglio.
Ti sconsiglio di farlo in ogni caso perché IE10 e 11 hanno veramente una buona flessibilità rispetto ai predecessori, è difficile che riscontri problemi su cose semplici come quella dei tuoi tre div in float, se gli riscontri fammi sapere esattamente quali in modo che ti possa chiarire il problema.

grazie mille per il consiglio e per la tua disponibilità, se ho bisogno ti faccio un fischio
buona giornata