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:
[sourcecode language=“html“]

Lorem ipsum nejeden filozof by mohl tvrdit, že balónky se sluncem závodí, ale fyzikové by to jistě vyvrátili.

  • Položka seznamu 1
  • Položka seznamu 2
  • Položka seznamu 3
  • Položka seznamu 4

[/sourcecode]

CSS:
[sourcecode language=“html“]img.left {float: left; margin: 10px;}
ul {margin-left: 10px;}[/sourcecode]

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é.
[sourcecode language=“html“]img.left {float: left; margin: 10px;}
ul { list-style-position:inside; margin-left: 2px; display: table; }
ul li {margin-left: 13px; text-indent: -12px; }[/sourcecode]

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:

[sourcecode language=“html“][/sourcecode]

Líbil se vám článek? Sdílejte jej prosím: