CSS position fixe pour IE6 : émulation et prise de tête
Publié le jeu, 08/10/2009 - 22:38 par robin
La position fixe n'étant pas reconnue par Internet Explorer 6, nous allons essayer de trouver une solution acceptable pour simuler celle-ci. Attention, prise de tête et mal de crâne en perspective.
Attention ! Cet article a été rédigé avant la sortie d' IE7, il ne s'applique que pour les versions d'Internet explorer 6 et inférieures. Sa première publication date de 2004. Dans le fond d'un tiroir et plein de poussière, cet article avait envie de revoir le jour ...
Comme pour le positionnement en absolu, un élément en position fixe est totalement retiré du flux. Mais il est cette fois positionné uniquement par rapport aux limites de la zone de visualisation, autrement dit la fenêtre du navigateur. Le défilement de la page n'a aucun effet sur un contenu en position fixe. Une sérieuse prise de tête car IE ne reconnait pas la position fixe...
Méthode 1 :
Exemple 13 : (les blocs sont frères et ont le body comme ancêtre)
HTML:
<body>
<div id="content">......</div>
<div id="content-fixe">......</div>
</body>
CSS:
* {
/* suppression des marges par défaut */
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
body{
overflow: hidden;
}
#content-fixe {
position: absolute; /* positionné par rapport au body */
top: 30px;
left: 30px;
background-color: Red;
width: 20%; /* attention aux débordements !! */
padding: 1em; /*notez qu'on peut appliquer du padding ..*/
}
#content {/* prise en charge de l'éventuel débordement de contenu,
permet de créer l'illusion d'avoir un élément fixe sur la page !! */
height: 100%;
overflow: auto;
width: 50%;
}
En l'état, cette astuce fonctionne avec tous les navigateurs récents. Néanmoins, quelques problèmes peuvent survenir dans certains cas précis :
Définir des marges :
Vous pourriez avoir envie de
définir des marges dans votre conteneur principal ("mainContent"). Etant
donné que IE utilise un modèle de boîte non-standard, l'utilisation de la
propriété "padding" directement sur l'élément "mainContent" fonctionnera
bien, mais posera des problèmes avec les navigateurs standards.
Il est donc conseillé soit d'utiliser au cas par cas la propriété margin
des balises incluses dans notre conteneur, soit d'utiliser un conteneur
supplémentaire pour définir des marges globales.(source: ibilab.net/).
Débordement à droite ou en bas des éléments fixés
:
Comme l'élément fixe "fixElement" n'est pas inclus dans
votre conteneur principal "mainContent", si l'élément fixe déborde à
droite (ou en bas), les barres de scroll du conteneur principal seront
masquées par l'élément fixe ! Cela est particulièrement vrai si vous
spécifiez une largeur de 100% pour l'élément fixe afin d'avoir une
en-tete fixe dans le cadre d'un site fluide. Pour corriger cela, il faut
mettre en place des ruses un peu plus compliquées.(source: ibilab.net/)
Avec cette méthode, le défilement (scroll) fonctionne avec la molette de la souris sous IE6 mais pas sous Firefox/mozilla (et peut-être sur d'autres navigateurs aussi)! C'est gênant ..
Méthode 2: celle qui fonctionne ! (testée sur IE6 et Firefox/mozilla uniquement)
Exemple 14 : (les blocs sont frères et ont le body comme ancêtre)
HTML:
<body>
<div id="content">......</div>
<div id="content-fixe">......</div>
</body>
CSS:
* {
/* suppression des marges par défaut */
margin: 0;
padding: 0;
}
body, html {
height: 100%;
}
html {
overflow: visible;
}
body {
overflow: auto;
}
#content-fixe {
position: absolute; /* positionné par rapport au body !! */
top: 30px;
left: 30px;
background-color: Red;
width: 20%; /* attention aux débordements !! */
padding: 1em; /*notez qu'on peut appliquer ici du padding, cool !*/
}
#content {
margin-left: 30%;
}
/*règles suivantes non reconnues par IE (syntaxe),elles rétablissent le comportement normal de
Firefox/mozilla et appliquent le positionnement fixe */
div[id=content-fixe] {
position: fixed !important;
}
html > body {
overflow: visible !important;
}
L'utilisation de !important permet d'écraser les valeurs données précédemment.
Avec cette méthode, le défilement avec la molette de la souris fonctionne
sous IE6 et Firefox/mozilla (et d'autres?...)
Notez que la méthode s'applique ici au body, qui est le conteneur
principal, contrairement à la méthode 1 qui s'appliquait au bloc
principal #content.
ATTENTION ! En modifiant ainsi le comportement des positions absolues, on ne peut plus positionner en "absolu" de façon classique, tous les éléments de la page en "absolu" deviennent fixes.
Exemple 16 : un sidebar fixe à gauche (les blocs sont fréres et ont le body comme ancêtre)
HTML:
<body>
<div id="content">......</div>
<div id="content-fixe">......</div>
</body>
CSS:
* {
/* suppression des marges par défaut */
margin: 0;
padding: 0;
}
body, html {
height: 100%;
}
html {
overflow: visible;
}
body {
overflow: auto;
}
#content-fixe {
position: absolute; /* positionné par rapport au body !! */
background-color: Red;
width: 10%;
top: 0; /* trés important, sinon le header disparaît !!*/
height: 100%;
padding: 1em; /* on peut appliquer du padding, cool !*/
}
#content {
margin: 20px 20px 20px 15%;/* so good ! but not at all in firefox/mozilla */
}
/*règles suivantes non reconnues par IE , pour rétablir le comportement normal de
Firefox/mozilla et appliquer le positionnement fixe */
div[id=content-fixe] {
position: fixed !important;
}
div[id=content] {
/* le margin-bottom ne "donne rien" sous firefox mozilla */
padding-bottom: 20px;
}
html > body {
overflow: visible !important;
}
Remarquez que cela fonctionne aussi très bien quand le contenu est "moins
haut" que le sidebar, comme le montre l'exemple 16bis (le scrollbar disparaît
évidemment).
Attention aussi au bloc en position absolu dont le contenu ne doit pas
être plus "gros" que celui-ci (tout dépend de ce que vous y mettez, de la
taille de celui-ci, de la dimension de la fenêtre du navigateur et du
type de mention numérique appliqué....révisez vos connaissances sur la
position absolue :-))
Exemple 18 : sidebar à droite : même principe que pour le sidebar à gauche, il faut pas oublier de "décaler" le sidebar pour IE.
HTML:
<body>
<div id="content">......</div>
<div id="content-fixe">......</div>
</body>
CSS:
* {
/* suppression des marges par défaut */
margin: 0;
padding: 0;
}
body, html {
height: 100%;
}
html {
overflow: visible;
}
body {
overflow: auto;
}
#content-fixe {
position: absolute; /* positionné par rapport au body !! */
background-color: Red;
width: 10%;
right: 0;
top: 0; /* trés important, sinon le header disparaît !!*/
height: 100%;
padding: 1em; /* on peut appliquer du padding, cool !*/
}
#content {
margin: 20px 15% 20px 20px; /* so good ! but not at all in firefox/mozilla */
}
/*règle suivante uniquement interprétée par IE, permet de décaler légèrement le sidebar
vers la gauche pour que le scrollbar ne soit pas caché (dans IE !) */
* html #content-fixe {
right: 17px; /* décalage vers la gauche pour faire apparaître le scrollbar */
}
/*règles suivantes non reconnues par IE , pour rétablir le comportement normal de
Firefox/mozilla et appliquer le positionnement fixe */
div[id=content-fixe] {
position: fixed !important;
}
div[id=content] {
/* le margin-bottom ne "donne rien" sous firefox mozilla */
padding-bottom: 20px;
}
html > body {
overflow: visible !important;
}
A propos des sidebars:
- A propos du padding : pas de problèmes, il est possible d'appliquer un padding au bloc fixe/absolu afin de mettre en forme son contenu. Tout dépend de ce que vous y mettez, mais c'est tout de même appréciable. Il faut savoir que le padding "agrandi" le bloc, et il faudra donc réajuster ensuite le margin du #content.
- Décalage pour IE6 : on est obligé de décaler vers la gauche le sidebar afin de faire apparaître le scrollbar. Cela ne pose pas de soucis car on a de la place, il faudra peut-être réajuster aussi le margin de #content.
Exemple 15 : un header fixe : la prise de tête se confirme: obligation de créer une enveloppe supplémentaire !!
HTML:
<body>
<div id="content">......</div>
<div id="content-fixe-wrapper">
<div id="content-fixe">......</div>
</div>
</body>
CSS:
* {
/* suppression des marges par défaut */
margin: 0;
padding: 0;
}
body, html {
height: 100%;
}
html {
overflow: visible;
}
body {
overflow: auto;
}
#content {
margin: 150px 20px 20px 20px; /* so good ! but not at all in firefox/mozilla */
}
#content-fixe {
padding: 1em; /* so good ! */
}
#content-fixe-wrapper {
position: absolute; /* positionné par rapport au body !! */
background-color: Red;
width: 100%;
top: 0; /* trés important, sinon le header disparaît !!*/
height: 100px;
right: 0px; /* vaut mieux le plaquer à droite pour que cela soit la même chose
dans IE et firefox/mozilla : cf règle suivante*/
}
/*règle suivante uniquement interprétée par IE */
* html #content-fixe-wrapper {
right: 17px;
}
* html #content-fixe {
margin-left: 17px; /* pour compenser le décalage engendré par la règle précédente */
}
/*règles suivantes non reconnues par IE , pour rétablir le comportement normal de
Firefox/mozilla et appliquer le positionnement fixe */
div[id=content-fixe-wrapper] {
position: fixed !important;
}
div[id=content] {
/* le margin-bottom ne "donne rien" sous firefox mozilla */
padding-bottom: 20px;
}
html > body {
overflow: visible !important;
}
Exemple 19 : un footer fixe : la prise de tête se reconfirme: obligation de créer une enveloppe supplémentaire !!
HTML:
<body>
<div id="content">......</div>
<div id="content-fixe-wrapper">
<div id="content-fixe">......</div>
</div>
</body>
CSS:
* {
/* suppression des marges par défaut */
margin: 0;
padding: 0;
}
body, html {
height: 100%;
}
html {
overflow: visible;
}
body {
overflow: auto;
}
#content {
margin: 20px 20px 150px 20px; /* so good ! but not at all in firefox/mozilla */
}
#content-fixe {
padding: 1em; /* so good ! */
}
#content-fixe-wrapper {
position: absolute; /* positionné par rapport au body !! */
background-color: Red;
width: 100%;
bottom: 0; /* trés important, sinon le header disparaît !!*/
height: 100px;
right: 0px; /* vaut mieux le plaquer à droite pour que cela soit la même chose
dans IE et firefox/mozilla : cf règle suivante*/
}
/*règle suivante uniquement interprétée par IE */
* html #content-fixe-wrapper {
right: 17px;
}
* html #content-fixe {
margin-left: 17px; /* pour compenser le décalage engendré par la règle précédente */
}
/*règles suivantes non reconnues par IE , pour rétablir le comportement normal de
Firefox/mozilla et appliquer le positionnement fixe */
div[id=content-fixe-wrapper] {
position: fixed !important;
}
div[id=content] {
padding-bottom: 150px; /* le margin-bottom ne "donne rien" sous firefox mozilla ,
il permet ici au texte de ne pas être caché par le footer dans firefox/mozilla */
}
html > body {
overflow: visible !important;
}
A propos du header et du footer:
- Décalage pour IE6 : même technique que pour le sidebar à droite pour
faire apparaître le scrollbar, sauf que là, on a un petit problème à
cause de la largeur de 100%. On est obligé de créer une enveloppe
supplémentaire (#content-fixe-wrapper) pour pouvoir compenser ce décalage
à gauche (les écritures côté gauche disparaissent de la fenêtre du
navigateur (avec IE) comme le montre l'exemple 15bis (sans wrapper)).
Ainsi, pour faire réapparaître les écritures, on applique un * html #content-fixe { margin-left: 17px; } uniquement pour IE.
Tout le texte est visible sous Firefox/mozilla - A propos du padding : comme je l'ai dit avant; le padding va
"agrandir" notre bloc et les écritures vont disparaître côté gauche (dans
IE et firefox/mozilla c'est pareil).
Notre enveloppe #content-fixe-wrapper va nous permettre d'appliquer un padding à l'enveloppe intérieure qui est #content-fixe.
#content-fixe { padding: 1em; } fonctionne dans les deux navigateurs, magique !!!
Exemple 17 : sidebar gauche et header fixes : technique appliquée à des blocs englobés dans différents conteneurs (histoire de changer !)
HTML:
<body>
<div id="content">
<p id="p1">......</p> <!-- header -->
<p id="p2">......</p> <!-- sidebar -->
<div id="contenu">
<p>......</p>
<p>......</p>
......
<p>......</p>
</div>
</div>
</body>
CSS:
* {
/* suppression des marges par défaut */
margin: 0;
padding: 0;
}
body, html {
height: 100%;
}
html {
overflow: visible;
}
body {
overflow: auto;
}
p#p1 {
position: absolute; /* positionné par rapport au body !! */
background-color: Red;
width: 100%;
top: 0; /* trés important, sinon le header disparaît !!*/
right: 0;
height: 100px;
}
p#p2 {
position: absolute; /* positionné par rapport au body !! */
background-color: Olive;
width: 100px;
height: 100%;
top: 100px;
padding: 1em; /* on peut appliquer du padding, cool !*/
}
#content {
margin-top: 130px; /* eh oui, ça fonctionne !!!
peut être remplacé par un padding-top appliqué au bloc #contenu*/
}
#contenu {
padding: 0 20px 20px 150px;
/* le padding latéral sera ajusté en fonction du padding du sidebar ..*/
}
/*règle suivante uniquement interprétée par IE, permet de décaler légèrement le header
pour que le scrollbar ne soit pas recouvert (dans IE !) */
* html #p1 {
right: 17px!important;
}
/*règles suivantes non reconnues par IE , pour rétablir le comportement normal de
Firefox/mozilla et appliquer le positionnement fixe */
p[id=p1],p[id=p2]{
position: fixed !important;
}
html > body {
overflow: visible !important;
}
On est obligé de séparer les deux blocs en position fixe/absolu (création d'une nouvelle enveloppe #contenu) des autres blocs constituant la page principale (les autres paragraphes).
Tous les exemples fonctionnent correctement sous IE6, à vous de les
tester sur des versions antérieures si vous en avez la possibilité.
Adaptez-les à vos gabarits (prévoyez l'aspirine !!).
Bon, je ne sais pas pour vous, mais moi j'ai vraiment mal à la tête, on
va en rester là pour l'instant, affaire à suivre ...
Méthode 3 : Variante pour un sidebar à gauche : une feuille de style pour IE6 (commentaires conditionnels), un code css simplifié et un overflow:auto pour le sidebar fixe :
Nous allons voir ici une variante du code css pour résoudre le problème de la position fixe sous IE6. Nous allons appliquer cette variante sur l'exemple d'un sidebar fixe à gauche (exemple 16), mais elle est logiquement applicable sur les autres exemples de la première page de cet article:
- appliquer une feuille de style uniquement pour IE6 grâce aux commentaires conditionnels
- le code css est simplifié (au niveau des overflow pour les balises body et html), mais parfaitement fonctionnel
- appliquer un overflow: auto sur le sidebar fixe dans le cas d'un débordement de contenu (exemple 20bis)
- fixer le sidebar dans les navigateurs respectueux ...
Voir le résultat final : exemple 20 et exemple 20bis (affichez le code source !)
Pretty good stuff !
C'est cette méthode (commentaires conditionnels) qui est appliquée aux
kits graphiques CSS suivants :
Le code xhtml de base:
<body> <div id="content">......</div> <div id="content-fixe">......</div> </body>
Let's go fixing :
Grâce aux commentaires conditionnels uniquement interprétés par Internet
Explorer, nous allons créer une feuille de style pour IE6 afin de simuler
la position fixe.
Typiquement vous "linkerez" vos css en placant dans la partie
<head></head> le code suivant (pour des raisons
pratiques le code css de mes exemples est intégré dans la page,
mais cela fonctionne pareil):
<link rel="stylesheet" href="style.css" type="text/css" />
<!--[if IE 6]>
<link rel="stylesheet" href="fixIE6.css" type="text/css" />
<![endif]-->
nous placerons le code suivant dans fixIE6.css :
html {
overflow: hidden;
}
body {
height: 100%;
width: 100%;
overflow: auto;
}
et celui là dans style.css :
body {
margin: 0;
padding: 0;
color: #303030;
background: #fafafa url(img/bodybg.gif) top left repeat-y;
font: 76% Verdana,Tahoma,sans-serif;
}
#content-fixe {
position: absolute; /* ne pas oublier !!!*/
top: 0;
left: 0;
width: 220px;
height: 100%;
overflow: auto;
background: #e0e0e0;
}
/*rgle suivante non reconnues par IE , pour rtablir le comportement normal de
Firefox/mozilla (et des autres !...) et appliquer le positionnement fixe */
body >#content-fixe {
position: fixed;
}
#content-fixe p {
margin: 0 20px 18px 5px;
color: #606060;
font-size: 0.8em;
}
#content {
width: 520px;
margin: 0 0 0 240px;
padding: 20px 0;
background: #fafafa;
}
#content p {
margin: 0 0 20px 0;
line-height: 1.5em;
}
On a appliqué un overflow: auto au bloc #content-fixe qui va permettre de gérer un éventuel débordement de contenu, comme le montre l'exemple 20bis
Conclusion :
On a un code css simplifié par rapport aux exemples de la première page
avec une simulation correcte de la position fixe dans IE6.
Ce qu'il faut retenir :
- les règles CSS pour IE6 (via des commentaires conditionnels):
html {
overflow: hidden;
}
body {
height: 100%;
width: 100%;
overflow: auto;
}
- la règle css pour fixer votre sidebar (ou autre...) dans les navigateurs respectants les standards, on utilise le sélecteur de descendance non pris en charge par IE6 :
body>#content-fixe {
position: fixed;
}
on aurait pu utiliser aussi le sélecteur d'attribut suivant (ne pas oublier le !important ):
div[id=content-fixe] {
position: fixed !important;
}
Ce tutoriel est distribué sous une licence Creative Commons by-nc-sa 3.0. Consultez la page dédiée aux licences de distributions.
- Tutoriels CSS :
- 2084 lectures
Commentaires :
Poster un nouveau commentaire