CSS příklad č.1: Patička

Popis

Tento příklad vznikl jako poptávka po řešení patičky u spodního okraje za použití CSS. Jedná se o patičku s fixní výškou, přičemž pozice patičky může nabývat dvou stavů:

je-li obsah stránky delší než je velikost okna prohlížeče, tak je patička zobrazena hned za obsahem
je-li obsah stránky kratší než je velikost okna prohlížeče, tak je patička zobrazena u spodního okraje okna

Podporované prohlížeče

Tento příklad byl testován v těchto prohlížečích:

Internet Explorer 5.0 na Windows
Internet Explorer 5.5 na Windows
Internet Explorer 6.0 na Windows
Mozilla 1.4 na Linuxu
Opera 7.20 B1 na Linuxu
Konqueror 3.1.1 na Linuxu

Legenda

Červenou barvou jsou označeny prohlížeče vykazující fatální chyby.
Šedou barvou jsou označeny prohlížeče vykazující drobné chyby, jež však nějak více nebrání použitelnosti webu.
Zelenou barvou jsou označeny prohlížeče, které se chovají výborně.

Ve všech prohlížečích kromě Opery a Konqueroru funguje vše v pořádku. Opera obsahuje kosmetickou vadu při dynamickém zkrácení obsahu dokumentu ze skriptu a Konqueror pozici vždy přilepí na konec dokumentu (což nevadí, jelikož se tím nezhoršuje dostupnost informací).

Opera

Opera obsahuje menší chybu při dynamickém zkrácení obsahu dokumentu (např. ze skriptu). Zachová se tak, že je patička korektně pozicována, ale za dokumentem zbyde prázdné místo. Řešení je ve volání funkce reset (viz zdrojový kód tohoto příkladu) vždy po změně obsahu dokumentu.

Konqueror

Konqueror vždy přilepí patičku na konec dokumentu. Navíc obsahuje podobnou chybu jako v případě Opery, řešení je stejné, tj. zavolat funkci reset vždy po změně obsahu dokumentu.

Poznámky

Je třeba nepoužívat margin-top a margin-bottom na některých místech, jinak se v Mozille posune celý layout dolů. Místo nich lze použít padding.
Příklad neobsahuje validní CSS, jelikož používá nestandardní direktivu expression pro odstranění chyby v občasném posunutí patičky o 1 pixel nahoru v Internet Exploreru.

Seznam použitých workaroundů

Nahrazení direktivy min-height v Internet Exploreru alternativní verzí. Využití workaroundu "html>body #id".
Internet Explorer má občas problémy s umístěním patičky ke spodnímu okraji. Z nepochopitelných důvodů občas ujede o 1 pixel nahoru. Proto je třeba použít malý workaround využívající direktivu expression, takže se změna projeví jen v IE.