Rozdíly mezi prohlížeči

Je mnoho dalších prvků a parametrů, které můžete do HTML přidat, ale ty můžete najít v odkazech, které jsem uváděl na první stránce této prezentace. Závěrečnou kapitolu tohoto úvodu věnuji ukázce nejpalčivějšího problému - implementačním rozdílům jednotlivých prohlížečů. Ukážeme si jeden konkrétní rozdíl - přesněji řečeno jednu (dle mého názoru úmyslnou) chybu v prohlížeči Microsoft Internet Explorer. Tato chyba je známa už poměrně dlouho, ale Microsoft ji opravil až ve verzi 6 svého prohlížeče (kde naopak naimplementovali vývojáři jinou, tentokrát mnohem výraznější chybu.)

Standard CSS zcela jednoznačně říká, že parametr width v kaskádových stylech určuje šířku vnitřního obsahu prvku BEZ vzdálenosti vnitřního obsahu prvku od ohraničení, tloušťky ohraničení (border-width) a velikosti okraje(margin). Microsoft Internet Explorer započítává do šířky prvku vnitřní vzdálenost (padding) i velikost jeho okraje (border-width). Budete-li tedy mít následující formát prvku <div>,

div.strange{
margin:10px;
border-width: 30px;
padding: 5px;
width: 150px;
font-size: 150%;
border-color: red;
border-style: solid;

bude vnitřní velikost okna bez okraje v prohlížeči podporujícím standardy 150 bodů. V Microsoft Internet Exploreru 5.x to bude pouhých 80 bodů.Což si můžete vyzkoušet zobrazením této stránky v MSIE a jiném prohlížeči. Následující prvek <div> bude v  MSIE (MicroSoft Internet Explorer) příliš malý.

Chyba MSIE

Tento nedostatek prohlížeče MSIE se řeší technikou, které se říká po vzoru staré ruské hračky "matrjoška". Jedno z je takové, že se námi vyžadovaný <div> vložíme do jiného prvku <div> u něhož nastavíme vyžadovaný "margin" a nulový "border". Šířku tohoto prvku nastavíme na vnitřní šířku vkládaného elementu + 2 * šířku ohraničení vkládaného elementu + 2 * vnitřní vzdálenost od okraje. Výsledný CSS bude vypadat takto:

div.inside{
width: 100%;
border-width: 30px;
margin:0px;
padding: 5px;
font-size: 150%;
border-color: red;
border-style: solid;
}
div.outside{
padding: 0px;
margin: 10px;
width: 220px;
border-width: 0px;
}

Kód v HTML bude pak vypadat následovně:

<div class="outside"><div class="inside">Řešení chyby v MSIE</div></div>

Následující <div> by pak měl vypadat stejně ve všech prohlížečích:

Řešení chyby v MSIE

Obecné doporučení je: budete-li psát HTML stránky, zkoušejte jejich vzhled vždy ve více prohlížečích. K dispozici máte například:

A více už na hodinách ...