Template auto-dimensionante con problemi su IE

teju

Template auto-dimensionante con problemi su IE

Ciao a tutti, ho trovato un template molto bello che permette il ridimensionamento automatico a seconda della grandezza dello schermo su cui si visualizza (...e dunque di conseguenza del sistema utilizzato: PC, Tablet, Cellulare...).

Funziona correttamente su PC utilizzando Chrome, Firefox; funziona correttamente su iPhone e BlackBerry; funziona su Tablet Acer con Android...

Con Explorer (sia l'8 che il 9) invece da problemi e non carica la barra a lato, ma la piazza sotto, come fosse uno schermo stretto - a modi cellulare.

Potete trovare una demo all'indirizzo http: // leonpaternoster.com/scherzo/ o nel mio sito in firma.

E' certamente un problema di compatibilità del CSS, ma cosa non funziona?? Dove metto le mani??

Grazie mille

teju

Nessuno riesce a darmi una mano?? Grazie! ^_^

alesma

Ciao!
Ie8 non supporta le media-queries e la sidebar non ha float:left di default Gli viene assegnato dopo una media-query sulle dimensioni dello schermo schermo( @media screen and (min-width: 850px) {...} riga 930 ).

Le soluzioni sono 2:

1 imposti il float e gli altri stili con degli hack css solo per ie
2 Setti il float di default e poi lo sovrascrivi nelle media-queries per schermi più piccoli.

teju

Se io dunque metto ad inizio CSS una cosa tipo:
#sidebar { float:left; }

e lascio il resto immutato, poi lo sovrascrive da solo quando occorre?

teju

Trovato: ho aggiunto all'inizio CSS questo codice:

#content {
	clear: both;
	width: 550px;
	float: left;
}

#sidebar {
	float: right;
	width: 220px;
}

E' pulito? Grazie, ciao ciao
Teju

alesma

se fai così devi controllare che dopo sia resettato con un float:none dove serve, ovvero dopo le media-queries per gli schermi più piccoli.

teju

...non ho capito allora cos'altro avrei dovuto fare: non sono un mago in CSS, dunque se riesci mi dici cosa andare a scrivere?

Grazie

alesma

Sorry Teju pensavo fossi interessato a capire perchè non funziona su ie8.

se ti interessa dai un occhiata a questo tutorial:
http(:)//coding.smashingmagazine(.)com/2011/01/12/guidelines-for-responsive-web-design/