bar at the top ...

Fixed


Some words on how to fix it, or: how to make it stay in Microsoft's IE...

Content


[Deze pagina is in aanbouw]

Als het mogelijk was in de populaire browser MSIE (MS Internet Explorer) 'fixed positioning' te bewerkstelligen met de toewijzing van de waarde 'fixed' aan CSS2+ eigenschap position, dan was deze oefening grotendeels overbodig. Dit voorbeeld laat zien hoe je met enig kunst en vliegwerk ook in MSIE (MS Internet Explorer) elementen een vaste plaats binnen de viewport kunt geven. Om tot een optimaal resultaat te komen wordt daarbij min- en max-width in MSIE met behulp van MSIE's CSS expressies (dynamische CSS eigenschappen) geimplementeerd.

Stijlbladen

Voor deze pagina worden drie stijlbladen gebruikt, of eigenlijk vier: één geschikt voor alle browsers, één voor moderne browsers, één speciaal voor Internet Explorer en dan nog een klein JavaScript stijlblad voor Netscape 4 om ook het handjevol stokoude bezoekers toch mee te laten doen (zie jsss). Eerst komt het stijlblad voor allen, global.css, waarna met gebruik van @import binnen een STYLE element de stijlregels voor meer moderne browsers uit bestand modern.css worden geimporteerd. Na die stijlregels voor browsers die iets met 'position:fixed' weten te beginnen komt het stijlblad met regels speciaal voor MSIE: msie.css. Om MSIE van andere browsers te scheiden wordt gebruik gemaakt van z.g. Conditional Comments. Het JavaScript stijlblad voor Netscape 4, ns4.jss, zal ik hier niet bespreken.

Samen met twee kleine JavaScript bestanden worden in de HEAD sectie de voor dit voorbeeld drie belangrijkste stijlbladen zo aan de pagina verbonden:


<link
 type = 'text/css'
 rel  = 'stylesheet'
 href = 'global.css'
>

<style
 type = 'text/css'
>@import url(modern.css);</style>

<script
 type = 'text/javascript'
 src  = 'global.js'
></script>


<!--[if lt IE 7]>

<link
 type = 'text/css'
 rel  = 'stylesheet'
 href = 'msie.css'
>

<script
 type = 'text/javascript'
 src  = 'msie.js'
></script>

<![endif]-->

Pagina-indeling

Met twee elementen wordt de pagina opgedeeld in een linker baan die in beeld zal blijven en een rechter gedeelte voor de inhoud waar het werkelijk om gaat. Het te fixeren element krijgt als ID 'oFixed' en het element met de inhoud 'oContent'. In dit voorbeeld heeft oFixed een breedte van 160px en oContent een minimum breedte van 300px en een maximum breedte van 800px. Element oFixed krijgt een hoogte van 100% toegewezen, net als het BODY element, zodat de onderzijde gelijk valt met de bodem van de viewport. Om niet direct in de problemen te geraken bij het opgeven van afmetingen ('width' en 'height') krijgen deze elementen geen 'margin', 'border' of 'padding'. Zo zal in een browser die een box inricht naar het model van 't W3C (zie CSS1 'Formatting model' en CSS2 'Box dimensions') gelijke afmetingen kennen als een box in een browser die 'border' en 'padding' onderdeel van de opgegeven 'width' of 'height' laat zijn. Het zou kunnen dat later in CSS3 de keuze wordt gegeven een box in te richten als 'content-box' of 'border-box' maar voor nu behoeven verschillen niet zichtbaar te zijn door ze gewoon niet aan te roeren. De relevante stijlregels voor deze twee elementen luiden:

global.css

html, body, #oFixed {
  margin        : 0;
  padding       : 0;
  height        : 100%;
}

#oFixed {
  position      : absolute;
  left          : 0;
  top           : 0;
  z-index       : 1;
  width         : 160px;
  border        : none;
  overflow      : hidden;
}

#oContent {
  position      : absolute;
  left          : 160px;
  top           : 0;
  z-index       : 1;
  width         : auto;
  border        : none;
  min-width     : 300px;
  max-width     : 800px;
  min-height    : 100%;
}

modern.css

#oFixed {
  position      : fixed;
}

msie.css

#oFixed {
  position      : absolute;
}

#oContent {
  height        : 100%;
  width         : expression(
    document.body.clientWidth <
    (this.offsetLeft + contentMinWidth) ?
      (contentMinWidth + 'px') :
    document.body.clientWidth >
    (this.offsetLeft + contentMaxWidth) ?
      (contentMaxWidth + 'px') : 'auto');
}

Zoals te zien is voor oFixed de waarde van eigenschap 'position' voor allen eerst 'absolute', dan voor moderne browsers 'fixed' om voor MSIE weer 'absolute' te worden. Door de waarde eerst 'absolute' te laten zijn zal de pagina in iets oudere browsers die de '@import' regel negeren of 'fixed' als waarde voor 'position' niet waarderen toch een normale inrichting kennen.

Om de minimum- en maximum breedte voor oContent in MSIE te bewerkstelligen wordt er gebruik gemaakt van een JScript expressie die in gewone taal luidt: als het zichtbare gedeelte van het BODY element, zeg viewport, kleiner is dan de som van de minimum breedte voor oContent en de horizontale beginpositie dan is de breedte gelijk aan de minimum breedte en als het zichtbare gedeelte van het BODY element groter is dan de som van de maximum breedte voor oContent en de horizontale beginpositie dan is de breedte gelijk aan de maximum breedte; anders is de breedte 'auto'. Variabelen contentMinWidth en contentMaxWidth worden aan het begin van global.js gedefinieerd.


Helaas helaas, pas na 14 jan. 12.00u vervolg.....
decolorize used elements