Podpora jazyků XHTML a CSS v moderních prohlížečích VII.

Ico zajímavosti

10.08.2008 - PaedDr. Petr Pexa Počet zobrazení: 1271  

V tomto dílu našeho seriálu se zaměříme na poměrně závažný problém se zobrazením mezery pod obrázkem, vloženým do buňky v tabulce nebo blokového elementu < div > a který se často projevuje např. mezerami mezi grafickými tlačítky v menu nebo mezerou pod horním bannerem webu a zbytkem stránky.

Podle použitého DTD (Transitional nebo Strict, viz 3. a 4. díl tohoto seriálu) a podle toho, zda je ukončovací element buňky < /td > za obrázkem odřádkován či nikoliv, se pod obrázkem vytvoří nebo naopak nevytvoří několikapixelová mezera.

Proč tento problém vlastně existuje? Explorer zachází s elementem < img / > jako s prvkem řádkovým (typu in-line), tedy podobně jako s textem a pod takové prvky vkládá správně automaticky mezeru kvůli tzv. klesajícím tvarům některých malých písmen (y, j, p, g apod.). Je nutné dodat, že takové zobrazení je správné, podle specifikace CSS je < img / > opravdu prvkem typu in-line. Bohužel ale zároveň Explorer chybně interpretuje odřádkování ukončovacích elementů a vkládá před ně vždy mezeru, která se pak projevuje zmiňovanou mezerou pod obrázkem.
Firefox a Opera interpretují s DTD Transitional obrázek odlišně - chybně jako prvek blokový a mezeru pod obrázkem negenerují, s DTD Strict již chápou také obrázky jako prvky typu in-line a mezeru zobrazí. Odřádkování ukončovacích elementů těmto prohlížečům nevadí.

Výčet jednotlivých způsobů zobrazení bude možná trochu nepřehledný, protože variant existuje poměrně hodně (viz ukázky), ale naštěstí řešení tohoto problému není obtížné a je univerzálně funkční ve všech prohlížečích.

Nejprve tedy ukázky zobrazení obrázku v tabulce s DTD typu Transitional:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

Pokud je ukončovací element buňky < /td > za obrázkem odřádkován, v Exploreru je pod obrázkem mezera, v ostatních prohlížečích nikoliv .

< table >
   < tr >
     < td >
       < img src="grafika.gif" alt="obrázek" / >
     < /td >
   < /tr >
< /table>

Pokud není ukončovací element buňky za obrázkem odřádkován, v žádném z prohlížečů mezera není.

< table >
   < tr >
     < td >
       < img src="grafika.gif" alt="obrázek" / >< /td >
   < /tr >
< /table>


Ukázky zobrazení obrázku v tabulce s DTD typu Strict:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

Pokud je ukončovací element buňky < /td > za obrázkem odřádkován, v Exploreru je opět pod obrázkem mezera, v ostatních prohlížečích již ale také!

< table >
   < tr >
     < td >
       < img src="grafika.gif" alt="obrázek" / >
     < /td >
   < /tr >
< /table>


Pokud není ukončovací element buňky za obrázkem odřádkován, v Exploreru mezera pod obrázkem není jako s DTD Transitional, v ostatních prohlížečích ale mezera je! Je tedy zřejmé, že i Firefox a Opera chápou s DTD Strict obrázky již také správně jako řádkové prvky. Explorer zobrazuje mezery bez ohledu na použité DTD, ale podle toho, zda odřádkujeme ukončovací element buňky nebo nikoliv, jako řádkový prvek ho ale chápe vždy.

< table >
   < tr >
     < td >
       < img src="grafika.gif" alt="obrázek" / >< /td >
   < /tr >
< /table>


Řešení problému mezer pod obrázkem shodné pro všechny prohlížeče:

Budeme tedy spíše předpokládat, že mezery pod obrázkem nejsou žádoucí, protože např. u svislého menu, tvořeného grafickými tlačítky v buňkách skryté tabulky, by se mezi tlačítky vytvořily mezery.

První univerzální řešení je naznačeno v předchozích ukázkách - DTD Transitional a neodřádkovat ukončovací element < /td >. Kód ale není v tomto případě příliš přehledný a hůře se nám budou hledat např. omylem neukončené elementy (což odporuje syntaxi jazyka XHTML).

Profesionálnější univerzální řešení: samozřejmě nejlépe DTD Strict (lze použít i Transitional), ale pokud jste si dobře prohlédli ukázky s DTD Strict, je pro všechny prohlížeče společná jen varianta s mezerou pod obrázkem (ukončovací element < /td > je odřádkován), jenže my mezery zobrazit nechceme.

Zde přichází na řadu jazyk CSS a jeho vlastnost display s hodnotou block, která obrázek přestane chápat ve všech prohlížečích jako in-line prvek a Explorer navíc přestane zobrazovat mezeru před odřádkovaným ukončovacím elementem < /td > bez ohledu na použité DTD.

< table >
   < tr >
     < td >
       < img style="display:block" src="grafika.gif" alt="obrázek" / >
     < /td >
   < /tr >
< /table>


Pro zajímavost uvádím i ukázky zobrazení obrázku v elementu < div > < /div >, kde je problém mezer naprosto stejný jako v buňce tabulky. Vlevo zobrazení obrázku s DTD Transitional a bez display:block, vpravo s touto vlastností.

< div style="border: solid 5px red; width:190px" >
  < img src="grafika.gif" alt="obrázek" / >
< /div >

< div style="border: solid 5px red; width:190px" >
 < img style="display:block" src="grafika.gif" alt="obrázek" / >
< /div>


S DTD Strict je mezera pod obrázkem také i ve Firefoxu a Opeře, řešením je opět display:block (v poslední ukázce vlevo zobrazení obrázku s DTD Strict a bez display:block).

Pokud je ale v < div > použita také vlastnost height se shodnou hodnotou, jakou má vložený obrázek, mezery zobrazeny v žádném aktuálním prohlížeči nejsou (v Exploreru 6 ale ano!), viz prostřední obrázek v ukázce. Pro buňku tabulky tento „trik“ s výškou prvku ale neplatí a je proto ideální vždy použít i display:block (pravý obrázek v poslední ukázce). Na použitém typu DTD nakonec tedy opět nezáleží.
   
< div style="border: solid 5px red; width:190px" >
  < img src="grafika.gif" alt="obrázek" / >
< /div >

< div style="border: solid 5px red; width:190px; height:190px" >
  < img src="grafika.gif" alt="obrázek" / >
< /div >
< div style="border: solid 5px red; width:190px; height:190px" >
 < img style="display:block" src="grafika.gif" alt="obrázek" / >
< /div>


V příštím dílu seriálu se budeme věnovat obdobné problematice (ne)vytvoření prostoru pro obrázek při načítání stránky, tedy podpoře atributů width a height (resp. CSS deklarace výšky a šířky) u elementu < img / > v jednotlivých aktuálních verzích prohlížečů.

Aktuality