menu s libovolnými odkazy

odkaz

bla bla bla

Simulace position: fixed pro Internet Explorer 6

Chyba Exploreru 6: Pokud se uvnitř prvku s overflow: auto a nastavenou výškou nachází vnitřní prvek s position: relative, Internet Explorer 6 ve standardním módu vykreslí tento vnitřní prvek jakoby měl nastavenu position: fixed (fixed je hodnota v Exploreru normálně nepodporovaná). To znamená, že se prvek při rolování nehýbe, ale zůstává na místě. Jiné prohlížeče se chovají normálně.

Chyba se dá pomocí hacků zkombinovat s klasickou deklarací positon: fixed pro standardní prohlížeče (Mozilla, Opera). Níže uvedený příklad ukazuje použití chyby na vykreslení fixního levého menu:

Použitý styl:

<style>
body { margin: 0px; padding: 0px;}
#fixedMenu {width: 120px; position: fixed; top: 0px; left: 0px; float: left;}
#content {margin-left: 130px;} /* o 10px víc než šířka menu */
</style>

<!-- následuje styl pouze pro Explorer 6 -->
<!--[if IE 6]>
<style>
/* pro explorer */
body, html {
    overflow: auto;

    height: 100%; /* nutné*/
    margin: 0px; /* pro jistotu, jinak je vpravo hnusná druhá lišta */
}
#fixedMenu {position: relative;} /* popř. jiné top a left */
</style>
<![endif]-->

Použitý kód:

<div id="fixedMenu">
menu s libovolnými odkazy
</div>

<div id="content">
Normální text stránky
bla bla bla
</div>

Komentář ke stylu

Definici stylu pro Explorer jsem v tomto příkladu uzavřel do podmíněné poznámky (conditional comment)

<!--[if IE 6]>
kód interpretovaný pouze v Exploreru 6
<![endif]-->

Dalo by se použít i jiné oddělení, například podtržítkový hack, tohle mi ale přijde přehlednější a kompatibilnější s možnými budoucími prohlížeči (bug bude v budoucnu pravděpodobě odstraněn). Jde tam hlavně o to, že body (jako nadřazený prvek) má nastaveno overflow: auto; a že menu (fixedMenu) má nastaveno position: relative. Abych menu vyjmul z toku dokumentu, přidávám k němu float: left;.

Pro standardní prohlížeče podporující position: fixed; jsem zadal normálně fixní pozici. Pak už je jedno, jakým způsobem se ostatní obsah tomu fixnímu prvku "vyhne". V tomto příkladu používám levé margo (margin-left).

Co s Explorerem 5

V Exploreru 5.0 a 5.5 se využívaná chyba nevyskytuje, a tak tam menu nemá fixní pozici. Prostě prostě ujede nahoru, což myslím není taková katastrofa. Zastoupení Exploreru 5 mezi uživateli pomalu mizí, a tak to doporučuji ignorovat.

CSS příklady