I bug fix per explorer e un modus operandi che va sempre bene…
Stampate questo post e attaccatevelo in cameretta. Non scherzo 
Poche sono le cose da sapere quando si crea un css per un sito, e sono le seguenti.
Innanzitutto un buon modus operandi permette di non perdere tempo a capire perchè un div viene spostato su di un browser o più largo su di un altro.
Settate sempre, e nel caso, azzerate dove non necessari: margin, padding e border dei vostri div, e ovviamente calcolate sempre lo spazio occupati dai div comprendendo nel calcolo, nell’ordine: width+padding+border+margin o height+padding+border+margin
Poi ricordate i bug fix per ie6 e inferiori, che possiamo superare tramite semplici accorgimenti:
- Usate sempre un tipo di float se possibile (o tutto right o tutto left) e aggiungete display:inline; per evitare che ie raddoppi i margini
- per evitare il problema del box model di ie 5.5 usate un div ulteriore al vostro, senza evidenziare padding e margin del primo, ma evidenziandoli nel secondo. Invece cioè di avere:
#main-div{
width: 150px;
border: 5px;
padding: 20px;
}usate:
#main-div{
width: 150px;
}
#main-div div{
border: 5px;
padding: 20px;
} - Se dovete usare min-height o min-width per i vostri layout usate questi due semplici accorgimenti:
MIN-HEIGHT:/* per i browsers che lo supportano */
.container {
width:20em;
min-height:8em;
height:auto;
}
/* per Internet Explorer */
/*\*/
* html .container {
height: 8em;
}
/**/MIN-WIDTH: seguite questo semplice accorgimento di Stu Nicholls
E poi direi che avremo vinto (o quasi) contro Explorer
source: Noupe
L'Autore
Laura Gargiulo, webdesigner freelance. Web architect senior, esperta xhtml, css, usabilità, design, cms, webmarketing e Seo, Wordpress specialist. Membro del progetto di prossima pubblicazione Piperita Lab e dell'IWA Italy Visita il mio sito personale Lauryn.it e contattami pure per un preventivo gratuito.
Add to Google
26 Commenti
Tutto giusto, anche se tra ie7 e ie6 suggerirei di fare sempre più test possibili. L’esempio è corretto ma ie è molto sensibile all’ordine delle regole e alla rilevanza che ognuna di essa ha nel css.
sì esatto, tenerne sempre conto!
usare sempre molta specificità nella “cascata”.
es:
div#nome ul.cipollino li
e non #nome li solamente
bello, bello veramente l’articolo, lo appendo subito in ufficio.
Per il fix del min-width e del min-height non è meglio fare:
.container {
width:20em;
min-height:8em;
height:auto !important;
height: 8em;
}
?
Io sinceramente trovo che usare i bug fix non sia un bene.
Solitamente cerco di progettare il sito in modo da non usare hacking, alla fine non è così impssiblie da fare.
@patrick: hai ragione, bravo
@fabry: ti sfido a creare un sito che non abbia bisogno almeno del display: inline per il float
@lauryn: grazie
devo provare il display inline su un mio “sito” sperando che risolva anche con opera
Oddio creare un sito senza fix non è una cosa troppo difficile. Certo non siti graficamente complessi
mmm, non va anche se metto il display: inline, almeno su opera (ie non ho provato perché non lo ho)
float e dispaly inline non sempre servono in realtà!
Ho notato che quando si utilizzano liste per gestirle in orizzonatale è necessario!
In altri casi no!
vedere per credere : http://www.silfarma.com/
in realtà usare il display: inline quando si usa il float (purchè i div abbiano tutti lo stesso float, a sinistra o a destra) risolve il problema del raddoppiamento dei margini. se ponendo display:inline la cosa non si risolve e il box va a capo vuol dire che c’è dell’altro…
ma si argina il probl. mettendo stesso valore di float e display block, ovviamente dando le dimensioni esatte!
IO onestamente lo uso spesso utilizzando liste (ul Ol li) esplicitando bel valore della lista i margin ed i padding
e non mi ha mai dato probl.
credo dipenda dalla struttura padre figlio del css che non so per quale magia sono sempre riuscito a farla funzionare senza utilizzare inline!
e come dice lauryn:
usare sempre molta specificità nella “cascata”.
IMPORTANTISSIMO!
Bell’articolo Laura!
grazie stefano!
dimenticavo di aggiungere che la fonte da cui l’ho tradotto è: http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html
In realtà il problema che ho è il seguente:
ho un div con larghezza 100% e all’interno dei div con float left la cui larghezza sommata da cento però solo su firefox si vede bene (il div è al 100%) mentre su ie e opera il div non arriva al 100% e non riesco a capire perché
#divContenitore{
width: quanto vuoi!
height:quyanto vuoi!
disply:block
}
#divContenitore .contenuto{
display:block
float:left
}
prova!
attenzione però anche ai width percentuali. quando dai div 100% che deve coprire tutta la risoluzione video è sempre meglio mettere 99%. alcune risoluzioni infatti non essendo “standard” non permettono di avere un numero di pixel corretto e fanno comparire la barra di scorrimento.
non va
patrick, usa il forum per i problemi con i css
http://www.italianwebdesign.it/forum
patrick..esempio pls!
@lauryn: adesso posto solo l’esempio
@hor848: inserisci un url di un sito web in questa pagina: http://patrick91.webfactional.com/color e controlla la barra sotto la scritta istogramma che su ie e opera non esce sempre bene per esempio se provi con questo sito si vede quasi bene
carina quest’applicazione! fatta tu patrick?
Sì ma come vedi è ancora in fase di sviluppo
La prossima cosa da fare è sistemare (o meglio, creare ora è con delle regex) il parser css, infatti non supporta ancora le direttive speciali tipo @import
perchè si osanna firefox che su mac è uno, su pc un altro e ha tante di quelle rotture da non essere mai contento come una donnaccia capricciosa? a me non è mai piaciuto
probabilmente perchè progettavi per explorer rendendoti poi conto che su ff, opera etc non funzionava nulla di quello che era giusto.
se lavori per firefox, opera e tutti gli altri browsers che supportano gli standards vedrai che è explorer l’unico ad essere storto. il 6 perlomeno