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:
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]
Napsat komentář