Proč tento problém vlastně existuje? Explorer 6 a 7 zachází s elementem <img /> jako s prvkem řádkovým (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 6 a 7 chybně interpretuje odřádkování ukončovacích elementů a vkládá před ně vždy mezeru.
Explorer 8, Firefox a Opera interpretují s DTD Transitional obrázek 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.
<!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 6 a 7 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>
|
|
<!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 6 a 7 je opět pod obrázkem mezera, v ostatních prohlížečích již také!
Pokud není ukončovací element buňky za obrázkem odřádkován, v Exploreru 6 a 7 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 6 a 7 zobrazuje mezery bez ohledu na použité DTD, ale podle toho, zda odřádkujeme ukončovací element buňky </td> nebo nikoliv, jako řádkový prvek ho ale chápe vždy.
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), pokud jste si ale 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>.
<table>
<tr>
<td>
<img style="display:block" src="grafika.gif" alt="obrázek" />
</td>
</tr>
</table>
|
|
<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>
|
|
|
pepe © 2007