Při stylování pro různé prohlížeče se dříve nebo později dostanete do situace, kdy vám layout sedí všude jinde krom IE6 a starších. Běžným případem je kombinace position relative a absolute z čehož vznikne position fixed, nebo použití průhledných png obrázků

...

Do tohoto stádia jsem dospěl nedávno i já s jedním zapeklitým problémem, kdy v relativně pozicovaném boxu potřebuji mít odkaz sestávající se z obrázku a textu:


<div class="relativeBox" >
<a href="#"><img src="a.png" class="img" />Text odkazu</a>
</div>


Celý můj problém je, že obrázek je piktogram, který má sedět na barevném čtverečku a barva je definovaná uživatelem. V pokročilých prohlížečích stačí obrázku nastavit background-color na požadovanou barvu a tím máme po starostech. V IE6 nikoli. Zde musíme použít CSS vlastnost filter. Jenže tuto vlastnost nemůžeme přimo aplikovat na obrázek, protože on má jednak nastavenou barvu pozadí a druhak je to obrázek. Vlastnost filter se víceméně správně aplikuje pouze na blokové elementy.

Jenže do mého odkazu nechci blokový element, pak by text odkazu nepokračoval na tom samém řádku jako obrázek, ale byl by až pod tímto elementem na novém řádku. Navíc potřebuji pozadí pro elemenet s filtrem. Jak toho docílit? Vytvořil jsem tento kód:


<div class="relativeBox" >
<a href="#">
<span class="s1"><img src="a.png" class="img" /></span>
<span class="s2"><img src="a.png" class="img" /></span>
Text odkazu</a>
</div>


V prohlížečích vyjma <IE6 je jeden span schován pomocí display none. V <IE6 je potřeba schovat oba obrázky, ale jen přes visibility hidden, takže budou spany budou mít velikost, ale nebudou mít obsah. Spanu s1 nastavíme vlastnost filter a druhému nastavíme pozadí. Otázkou je jak, je dostat přes sebe :-)

Span s2 s pozadím podsuneme pod první tak, že mu nastavíme vlastnost float left. Tím ho umístíme vlevo pod první span. Pak pomocí záporného marginu umísítme celý řádek nahoru a tento span krásně zajete pod první s filtrem. Problém je, že filter dost často nebude filtrovat (závisí to na tom, v jakých elementech je umístěn a jak tyto elementy jsou nastylovány). Celý problém je, že filter funguje na blokové elementy, ale to span není. My ale nechceme blokový element. Takže sáhneme po vlastnosti display inline-block a máme vystaráno.


.s1 {
cursor: pointer;
display: none;
_display: inline;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='car.png',sizingMethod='image');
_width: 18px;
_position: relative;
_height: 18px;
_display: inline-block;}
.s1 img {visibility: hidden;}
.s2{
_margin-top: -22px;
_float: left;
_background-color: red;
width: 18px;
height: 18px;
}
.s2 img {_visibility: hidden; background-color: red;}


Layout vlastnost

Proč je nadpis o jakési layout vlastnosti a v příspěvku o ni ani zmínka? Zmínka byla ale skrytá :-)

IE do verze 7 si interně označuje vlastností layout ty elementy, které si sami rozhodují o svých rozměrech. Proto se výše zjednodušeně zmiňuji o display block. Nicméně tak jednoduché to není :-) Ve většině případů stačí nastavit šířku nebo výšku (viz kód nahoře) a IE si přepne vlastnost layout, ale občas to nestačí. Na stránce On having layout je pěkně popsána celá geneze vlastnosti layout a jak donutit IE aby ji pro jednotlivé elementy nastavilo a také jakými CSS vlastnostmi to lze docílit.

Tedy celé obskurní nastavování height a width spanu je jen o tom zapnout vlastnost layout a tedy jiný mód vykreslení pro daný prvek. V mém případě to nefungovalo a proto pomohlo použití vlastnosti display inline-block, která je pro můj případ naprosto vhodný.

Doplněno 19:20h: Pro samou radost jsem nezjistil, že to jde v IE daleko jednodušeji. Člověk když něco dlouho sochá, tak už do toho radši nešahá. Nicméně stačí jen jeden span s obrázkem a ne dva. Stačí pouze jeden, protože pokud má nastaveno display inline-block, lze mu nastavit jak pozadí tak filter dohromady a je to funkční konstrukce:


.s1 {
cursor: pointer;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='car.png',sizingMethod='image');
_display: inline-block;
vertical-align: bottom;
margin-right: 5px;
background-color: red;}
.s1 img {_display: none; vertical-align:bottom;}