Fix position:fixed

Position-egenskaben har en værdi, der kan være særdeles nyttig, nemlig værdien fixed. Et element, der har fået påtrykt egenskaben position:fixed, vil således blive fikseret i browservinduet, i modsætning til position:absolute, der fikserer elementet på websiden, altså i forhold til html-elementets øverste venstre hjørne. Eller i forhold til øverste venstre hjørne af et overordnet element, der har position-værdien relative eller absolute.

Problemet er blot, at Internet Explorer til Windows ikke kan fortolke denne værdi for egenskaben korrekt, så du kan kun se effekten på denne side, hvis du læser siden med Mozilla, Firefox, Opera eller en anden ordentlig browwser. Det er menuen i højre kolonne, der er fikseret.)

Hvad værre er, den fortolkning der sker, er lodret forkert. CSS-standarden siger klart, at hvis en egenskabs værdi ikke kan tolkes, skal den nærmest foranstående værdi være gældende. Så det burde være nok at indsætte en position:absolute lige foran position:fixed i nedenstående stylesheet, så ville sagen være ordnet, således at Internet Explorer brugte absolut positionering i stedet for fikseret positionering. Men Internet Explorer tolker position:fixed som om det var position:static. Derved positioneres element i forhold til hvor det optræder i kildekoden.

Tricket til at få Internet Explorer til i det mindste at positionere menuen absolut, der hvor jeg vil ha' den, klares ved at possitionere menuen absolut i det ordinære stylesheet for siden, og dernæst passere værdiparret position:fixed til alle andre browsere end Internet Explorer. Det kan ordnes på flere måder, men jeg er i skrivende stund (sommeren 2006) på vej til at forlade de stylesheet hacks, vi hidtil har brugt, fordi de fleste af dem ikke duer i Internet Explorer version 7, der forventes frigivet senere på året.

Det sætter endnu mere fokus på Microsofts egen metode til at passere forskellig kode til Microsofts forskellige browsere og til browsere fra andre leverandører end Microsoft.

Denne metode er baseret på brugen af betingede HTML kommentar-markører. Jeg skriver mere om disse i artiklen Microsoft betingede kommentarer. I dette tilfælde indsætter jeg følgende kode i sidens head-del efter det ordinære stylesheet for siden:

<![if !IE]>
<style type="text/css" media="screen">
div#menuspalte ul.cssmenu {
  width:200px;position:fixed;margin-top:1em;}
</style>
<![endif]>
<!--[if gt IE 6]>
<style type="text/css" media="screen">
div#menuspalte ul.cssmenu {
  width:200px;position:fixed;margin-top:1em;}
</style>
<![endif]-->

I klart sprog står her først: Alle browsere, der ikke er Internet Explorer, skal bruge dette stylesheet. Og dernæst: Internet Explorer med versionsnummer større end 6 skal bruge dette stylesheet.

Resultatet af øvelsen er, at alle ordentlige browsere viser en menu, der er fikseret i browservinduet, IE5 og IE6 viser en menu, der er absolut positioneret på den fikserede menus startposition i forhold til websiden og IE7 viser en meu, der er fikseret i browservinduet.

Artiklen på W3C's sektion for CSS Tips & Tricks: A pinned-down menu diskuterer sagen mere indgående.

Forbehold

Denne side validerer som korrekt xhtml 1.0, undtagen for så vidt angår den ulovlige brug af <![if !IE]> og <![endif]>.

Denne side er senest opdateret: 29. January, 2007