Lauryn Web Design - Milano, Edimburgo e online

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

Se ti è piaciuto condividilo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *