Problémy s obrázkovým pozadím v Mozille

10. prosince 2003

•

V poslední době se mnoho webdesignérů pracujících s CSS potýká s problémem, kdy se jim v Mozille nezobrazuje obrázkové pozadí pro sloupce layoutu, ačkoli v konkurenčních prohlížečích Internet Explorer 6.0 a Opera je vše v pořádku. Tento článek vám ukáže, jak na to.

Identifikace problému

Problém vzniká v případě, kdy máme layout s rodičovským divem, obsahující nějaký obrázek na pozadí. V tomto rodičovském divu je pak vnořeno několik dalších divů, tvořících jednotlivé sloupce layoutu (není podstatné, kolik těchto sloupců layout obsahuje). Jednotlivé sloupce jsou definovány pomocí CSS vlastnosti float a hodnoty left. Problém je v tom, že toto obrázkové pozadí rodičovského divu se v Mozille nezobrazuje.

Zde trochu odbočím. Obecně pomocí CSS jen velmi těžko dosáhneme toho, aby všechny sloupce layoutu byly stejně vysoké. Proč? Protože neznáme výšku obsahu (obvykle textu) umístěného v těchto sloupcích. Použití vlastnosti height je v takovém případě nesmyslné. Nicméně je faktem, že spousta designerů, respektive jejich klientů, tuto „vlastnost“ vyžaduje (inu, milióny stránek jsou stále postaveny na tabulkách, kde je něco takového běžné). Tento problém se obchází tak, že jednotlivé sloupce layoutu se vloží do nadřazeného divu s obrázkem na pozadí. A právě tento obrázek na pozadí zajišťuje, aby alespoň opticky byly jednotlivé sloupce stejně vysoké (reálně mají pochopitelně rozdílnou výšku).

Puristy chci na tomto místě upozornit, že mi je naprosto jedno, který prohlížeč to dělá správně a který špatně. O tom se můžete dočíst v článku CSS2 – pozicování elementů. Tento článek se zaměřuje na praktické hledisko a obsahuje pouze popis problému a jeho řešení. Běžného webdesignéra totiž nářky nad špatnou intepretací CSS v tom či onom prohlížeči nezajímají (vlastní zkušenost) – chce pouze vědět, jak to udělat tak, aby to celé fungovalo.

Ale dost tlachání, hlavní část našeho zdrojového kódu vypadá takto:

Takto vypadá výše uvedený kód v Internet Exploreru 6.0…

Vzhled kódu v Internet Exploreru 6.0

…a takto v nejnovější Mozille verze 1.6a:

Vzhled kódu v Mozille 1.6a

Již na první pohled je jasně vidět, že něco není v pořádku – obrázkové pozadí definované v rodičovském divu se v Mozille prostě nezobrazuje. Proč? Styl rodičovského divu je po formální stránce správný, totéž platí o definici jednotlivých sloupců layoutu. Když jsem na tento problém narazil poprvé, docela mně zaskočil, ale po pár minutách testování jsem přišel na jeho podstatu – pokud mají vnořené divy definovánu vlastnost float, rodičovský div má prostě nulovou výšku. Vnořené divy (v našem případě dva sloupce) tak přesahují nadřazený rodičovský div.

Pokud stále nechápete, oč jde, následující dva obrázky vám celou věc objasní. Prostor, který v Internet Exploreru 6.0 zabere rodičovský div, je orámován červenou čarou. Jak je vidět, výška rodičovského divu, pojmenovaného „main“, je shodná s výškou nejvyššího sloupce. To je stav, kterého chceme dosáhnout:

Prostor rodičovského divu

Úplně jiná je ovšem situace v Mozille:

Prostor rodičovského divu

Rodičovský div má v Mozille nulovou výšku, díky čemuž oba sloupce svůj rodičovský div přesahují. A samozřejmě, díky nulové výšce rodičovského divu se nezobrazuje pozadí jednotlivých sloupců. Jak to vyřešit? Přišel jse na dva plně funkční postupy.

Řešení 1: co float zkazil, to float napraví

Řešení první je opravdu triviální a naznačuje jej předchozí nadpis. Rodičovskému divu, pojmenovanému „main“, se prostě přiřadí vlastnost float, která z něj udělá plovoucí prvek. Pak se Mozilla chytne:

.main {
float: left;
width: 380px;
background-image: url(„background.gif“);
}

Opravdu triviální, že. Ovšem nevýhodou použití vlastnosti float v rodičovském prvku „main“ je to, že layout bude zarovnán buď vlevo (float: left) nebo vpravo (float: right). Jak postupovat v případě, že celý layout má být vycentrován? Pak samozřejmě float pro rodičovský div nelze použít!

Řešení 2: vlastnost clear a další div nás zachrání

V CSS existuje vlastnost clear, která určuje, jak se budou okolní divy chovat vzhledem k plovoucím divům, která nám zde pomůže. Takže, pod oba sloupce vložíme další div (pojmenovaný „correct“), který musí mít nadefinovánu vlastnost clear a nějakou minimální výšku – klidně stačí „height:1px“. To samozřejmě platí pouze v případě, že tento div nemá hrát v layoutu žádnou jinou roli. Pokud jej chceme využít i k něčemu jinému, nemusíme vlastnost height definovat, prostě do divu vložíme nějaký obsah. Takže – buď použijeme vlastnost height a div necháme prázdný, nebo do něj vložíme nějaký obsah a height nepoužít nemusíme. Takto vypadá celý kód druhého řešení: