Dikes za opravu, ten table-layout tam naozaj chybal.
Co sa tyka IE6 a IE7, napisal som ti expressiony. Kod mas patricne okomentovany. Zapis
*vlastnost respektuje IE6 a IE7, zapis
_vlastnost len IE6. Ak by si z nejakeho divneho dovodu chcel mat validne CSS, pouzi podmienene komentare.
Kód:
div {
display: table;
width: 100%;
border-spacing: 5px;
table-layout: fixed;
}
ul {
display: table-row;
/* IE7: prvky budu mat float, takze ich "vycisti" podla http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html */
*overflow: auto;
/* IE7: <ul> sa bude stale spravat ako zoznam, pretoze defaultne display hodnoty sa neprepisu. Vykastrovat, zlyncujem ho. */
margin-left: 0;
padding-left: 0;
list-style-type: none;
/* IE6: <ul>.clientWidth vracia 0, ak nema prvok explicitne zadanu sirku. Toto neuskodi. */
width: 100%;
}
li {
display: table-cell;
border: 1px solid black;
/* IE7: nahrazka border-spacing. Ak border-spacing nepotrebujes, pouzi margin: 0. Expressiona v IE6 nefunguje, ak nezadefinujes lubovolny margin, neviem preco, nevladzem to riesit. */
*margin: 0 5px;
/* Umiestni <li> vedla seba */
*float: left;
/* Workaround pre bug IE6: http://positioniseverything.net/explorer/doubled-margin.html */
_display: inline;
height: 2em;
/* Let the fun begin ;) */
*width: expression((function(li){
var ul = li.parentNode,
c = ul.getElementsByTagName('li').length,
s = li.currentStyle,
uls = ul.currentStyle,
ulw = ul.clientWidth - parseInt(uls.paddingLeft) - parseInt(uls.paddingRight);
return ~~(ulw / c) - (parseInt(s.marginLeft) + parseInt(s.marginRight) + parseInt(s.borderLeftWidth) + parseInt(s.borderRightWidth) + parseInt(s.paddingLeft) + parseInt(s.paddingRight)) + 'px';
})(this));
}
Kazdopadne mozem sa ti aj tak spytat na SO, ci cirou nahodou neexistuje alternativne riesenie (tipujem, ze neexistuje, a ak ho niekto pozna, nezabija cas na SO
), lebo toto riesenie s expressionmi prinasa napriklad take obmedzenie, ze vlastnosti padding, border a margin pre <li> plus padding pre <ul> nemozes specifikovat inak, ako v pixeloch; plus samozrejme tie
nevyhody automaticky plynuce z expressionov. Inak ale myslim, ze je to dobre riesenie; malo by fungovat stale, aj s vypnutym Javascriptom, okrem pripadu, ked ti na stranku pride niekto s IE6/7 + vypnutym Javascriptom + vysokou urovnou zabezpecenia (to sa nastavuje v Moznostiach internetu); takyto navstevnik ti myslim na stranku nikdy nezavita, kedze by mu s takouto konfiguraciou nefungovala velka cast webov.
Samozrejme nezabudni, ze kvoli najlepsej kompatibilite musis mat na uplnom zaciatku kodu platny doctype, ktory spusti standardny mod, najjednoduchsie
<!doctype html>.
Choď na stránku: