Tabelarna matematika

Na blogu Radi­o­nica sam davno video jedan post (tač­nije bio upu­ćen na isti) koji se bavi real­nim pro­ble­mima u imple­men­ti­ra­nju moder­nih CSS teh­nika u web dizajnu. Ništa loše u tome, sva­kod­nevno sam sve­stan tih pro­blema (kao i lepih strana, inače se ne bih ni zani­mao time).

Među­tim, pri­mer koji je isko­ri­šćen za ilu­stra­ciju jed­nog od pro­blema je…hmmm…zanimljiv. :) Naime, radi se o pro­blemu polu-fiksnog futera. Ideja je da futer uvek bude na dnu stra­nice, bez obzira da li sam sadr­žaj ispu­njava kom­pletnu stra­nicu ili ne. Autor, Miloš Mile­u­snić, navodi da je u tabe­lar­nim kostu­rima to veoma lako:

<table height="100%">
  <tr>
     <td height="100%"> content </td>
  </tr>
  <tr>
     <td height="20">footer </td>
  </tr>
</table>

I ovo će onda da uradi to što treba (naravno, samo uko­liko je stra­nica nei­spravna, tj. u quirks režimu, tj. nema nika­kav DOCTYPE spe­ci­fi­ci­ran). Među­tim, pogle­dajte cifre. 100% + 20px = 100% — fina neka mate­ma­tika. Ako ovo isto ura­dite u CSS-u:

<div style="height:100%">
	<div style="height:100%"></div>
	<div style="height:20px"></div>
</div>

…onda će donji div pobeći 20px ispod donje ivice bro­wsera (takođe samo u quirks režimu). Jer to je tačno i logično. Tabe­larni pri­mer je logički besmi­slen. Na nesreću, ovo jeste radilo u Net­scape Navi­ga­toru ranije i svi su to pri­hva­tili, hteli ne hteli. (ref: The web is dead and I kil­led it — David Sie­gel, autor čuvene Kil­ler web sites serije koja je pro­mo­vi­sala upravo ova­kve tehnike.)

Kre­i­rati fik­sni futer je veoma jed­no­stavno u CSS-u:

<div style="height:100%">
	<div style="padding-bottom: 20px;"></div>
	<div style="height:20px;position:fixed;bottom:0;"></div>
</div>

Naravno, ovo ne radi u IE, jer Micro­soft boli ona stvar za razvoj bilo kog od svo­jih pro­i­zvoda, dok god nema nika­kvu opa­snost od kon­ku­ren­cije. Stvari se pome­raju sa mrtve tačke sada, pa ćemo videti da li će IE 7 doneti ika­kva vredna poboljšanja.

P.S. Ovo pišem ovde samo zato što me mrzelo da se regi­stru­jem na ori­gi­nal­nom sajtu, ne da bih doba­ci­vao iz ćoška. Hteo sam isti ovaj komen­tar da napi­šem tada i tamo, no… Mislim da je regi­stra­cija pre­više muke da se ostavi jedan komen­tar. Miloše, WP 1.5 ima sasvim fine teh­nike za eli­mi­na­ciju spama, pa vredi pogledati.

P.S.2. Ovo što stalno nagla­ša­vam za quirks režim rada je zato što u standard-compliant režimu rada ni tabe­larni ni CSS kostur neće pome­riti futer nadole. Pogledajte:

• CSS, nei­spravna stra­nica, bez DOCTYPE-a = quirks
• tabela, nei­spravna stra­nica, bez DOCTYPE-a = quirks
• CSS, ispravna stra­nica = standard-compliant
• tabela, ispravna stra­nica = standard-compliant

Zašto? Ajde, znam da vas ima koji znate… ;)