levy sloupec

[ ON / OFF ]

[ zobrazit text / schovat text ]

Popis

Jedná se o třísloupcový layout v CSS, který navíc obsahuje hlavičku a patičku (viz předchozí příklad).

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ě.

Internet Explorer

Všechny verze Internet Exploreru vykazují chybu odsazení prostředního sloupce při zúžení okna prohlížeče. U verzí 5.5 a 6.0 lze částečně řešit specifikací min-width (resp. pomocí její náhrady pro IE, jelikož IE tuto direktivu nepodporuje).

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 testované verzi 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.

Seznam použitých workaroundů

  1. Nahrazení direktivy min-height v Internet Exploreru alternativní verzí. Využití workaroundu "html>body #id".
  2. Nahrazení direktivy min-width v Internet Exploreru nastavením šířky elementu #bottom-spacer na minimální šířku. Tento element slouží jako neviditelná odrážka patičky, takže nevadí, že se nastaví pevná šířka.
  3. Internet Explorer obsahuje tzv. tří pixelovou chybu při používání direktivy float. Workaround vzpočívá v určení výšky 0 pixelů pro prostřední sloupec pomocí direktivy expression (kterou podporuje jen IE).
  4. 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í opět direktivu expression, takže se změna projeví jen v IE.

Copyright © 2003 Martin Dvořák (homepage)