Na blogu Radionica sam davno video jedan post (tačnije bio upućen na isti) koji se bavi realnim problemima u implementiranju modernih CSS tehnika u web dizajnu. Ništa loše u tome, svakodnevno sam svestan tih problema (kao i lepih strana, inače se ne bih ni zanimao time).

Međutim, primer koji je iskorišćen za ilustraciju jednog od problema je…hmmm…zanimljiv. :) Naime, radi se o problemu polu-fiksnog futera. Ideja je da futer uvek bude na dnu stranice, bez obzira da li sam sadržaj ispunjava kompletnu stranicu ili ne. Autor, Miloš Mileusnić, navodi da je u tabelarnim kosturima 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 ukoliko je stranica neispravna, tj. u quirks režimu, tj. nema nikakav DOCTYPE specificiran). Međutim, pogledajte cifre. 100% + 20px = 100% - fina neka matematika. Ako ovo isto uradite 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 browsera (takođe samo u quirks režimu). Jer to je tačno i logično. Tabelarni primer je logički besmislen. Na nesreću, ovo jeste radilo u Netscape Navigatoru ranije i svi su to prihvatili, hteli ne hteli. (ref: The web is dead and I killed it - David Siegel, autor čuvene Killer web sites serije koja je promovisala upravo ovakve tehnike.)

Kreirati fiksni futer je veoma jednostavno 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 Microsoft boli ona stvar za razvoj bilo kog od svojih proizvoda, dok god nema nikakvu opasnost od konkurencije. Stvari se pomeraju sa mrtve tačke sada, pa ćemo videti da li će IE 7 doneti ikakva vredna poboljšanja.

P.S. Ovo pišem ovde samo zato što me mrzelo da se registrujem na originalnom sajtu, ne da bih dobacivao iz ćoška. Hteo sam isti ovaj komentar da napišem tada i tamo, no… Mislim da je registracija previše muke da se ostavi jedan komentar. Miloše, WP 1.5 ima sasvim fine tehnike za eliminaciju spama, pa vredi pogledati.

P.S.2. Ovo što stalno naglašavam za quirks režim rada je zato što u standard-compliant režimu rada ni tabelarni ni CSS kostur neće pomeriti futer nadole. Pogledajte:

• CSS, neispravna stranica, bez DOCTYPE-a = quirks

• tabela, neispravna stranica, bez DOCTYPE-a = quirks

• CSS, ispravna stranica = standard-compliant

• tabela, ispravna stranica = standard-compliant

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