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
