Internet Explorer si CSS box model

Una dintre diferentele dintre Internet Explorer si standartele de conformare a Web browserelor ce creeaza o serie de probleme incepatorilor CSS este CSS Box Model. Deoarece CSS box model este modul cum  browserele calculeaza asezarea in pagina si lungime, inaltimea un HTML element in pagina, este un pic mai usor de inteles de ce diferite browsere afiseaza diferit acelasi element ceea ce creaza frustrari si confuzii.
Cum functioneaza principiul CSS Box Model am explicat intr-o postare anterioara, dar totusi simt nevoia sa descriu su care sunt principiile dupa care Internet Explorer calculeaza afisarea in pagina.
Diagrama CSS Box Model
Mai jos este o simpla diagrama care demonstreaza cum dimensiunile unui element sunt interpretate in CSS:

Pentru a simplifica problemele accesate in aceasta postare vom considera ca proprietatea margin este interpretata de toate browserele in acelasi mod, si ne vom axa mai mult pe proprietatile  padding si border.












Dupa criteriile W3C, CSS box model la nivel: block level lungimea totala a unui HTML element in pagina se calculeaza dupa formula:

total width = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

Acelasi concept de calculare se foloseste si pentru inaltime dar, de dragul pastrarii simplitatii nu ma voi opri la el.
IE Box Model
Modul de calculare la IE Box Model este similar cu cel de la W3C dar exista o importanta diferenta: padding si border nu sunt incluse in formula de calcul.

total width = margin-left + width + margin-right

Acest lucru semnifica ca daca elementelul HTML are si padding orizontal si/sau border-e suprafata se va micsora pentru a face loc acestor padding-uri si border-e.
Cum de rezolvat problema?
1. Evitarea situatiilor care cauzeaza problema
Acesta este modul meu preferat pentru rezolvarea problemei. Simplu, evit sa specific ambele proprietati width si padding sau border pentru acelasi HTML element. Acest lucru ne asigura ca toate browserele vor utiliza aceiasi lungime totala indiferent de box modelul pe care il folosesc.
Iata un exemplu al rezolvarii problemei prin metoda descrisa mai sus:
HTML Exemplu
<div id="news">
    <h2>News</h2>
    <ul>
        <li>
            <h3>Articol numarul 1</h3>
            <p>Lorem ipsum dolor sit amet</p>
        </li>
        <li>
            <h3>Articol numarul 2</h3>
            <p>Lorem ipsum dolor sit amet</p>
        </li>
     </ul>
</div>
Pentru a face ca HTML lista aiba 250px width, border 1px, padding 10px, e nevoie de urmatorul cod CSS:
#news {
    padding:10px;
    border:1px solid;
    width:228px;
}
In browserele standarte, width total va fi 250px (1px border stinga, + 10px padding stinga  + width + 10px padding dreapta + 1px border dreapta). In IE 5.5 si versiunile mai vechi lungimea totala a blocului va fi doar 228px deoarece nu se adauga paddings si borders.
Deci cum se poate de evitat acest lucru? Se poate de pus div-ul cu id-ul news in alt container, in exemplul nostru sub forma de bloc lateral:
<div id="sidebar">
    <div id="news">
        ...
    </div>
</div>
In asa mod se poate de dat width la blocul sidebar:
#sidebar {width:250px}
#news {
    padding:10px;
    border:1px solid;
}
Deoarece #news este un element de tip block level, automat se va intinde pe  intreaga latime a elementului parinte, in cazul nostru #sidebar.