Při práci jsem narazil na problém s obtékáním obrázku. Než bych to vysvětloval, tady je kousek kódu:

<img class="left" alt="" src="fotka.jpg" />

<span id="more-327"></span>
<p>Lorem ipsum nejeden filozof by mohl tvrdit, že balónky se sluncem závodí, ale fyzikové by to jistě vyvrátili.</p>
<ul>
<li>Položka seznamu 1</li>
<li>Položka seznamu 2</li>
<li>Položka seznamu 3</li>
<li>Položka seznamu 4</li>
</ul>

CSS:

img.left {float: left; margin: 10px;}
ul {margin-left: 10px;}

V tomto případě předpokládám, že seznam i odstavec obrázek obteče. Obteče, ale… Bez problémů obteče ve Firefoxu, Opeře i Chrome. Kde je teda chyba, samozřejmě zase v IE. 🙁
Obrázek ukazuje, jak to vypadá v IE 8:

ie-problem

Co s tím?
Řešení není složité.

img.left {float: left; margin: 10px;}
ul { list-style-position:inside; margin-left: 2px; display: table; }
ul li {margin-left: 13px; text-indent: -12px; }

List-style-position řekne prohlížeči, že odrážky mají být uvnitř seznamu. To však není to pravé ořechové, takže potřebujeme ještě úpravu prvního řádku. K tomu slouží text-indent, kdy prvnímu řádku nastavíme zaporné odsazení.

Jelikož ve strarších prohlížečích IE oproti zbytku problížečů se špatně pracuje s margin/padding, je potřeba takto upravený kód dát do speciálního souboru pro IE. Jedná se o klasický css soubor, jen je trošku jinak vložen do html souboru:

<!--[if IE]>
<link rel="stylesheet" href="./css/ie8.css">
<![endif]-->
Zaujal Vás článek? Informujte ostatní