IE ET LA POSITION FIXED

, , , , , ,

Je galère depuis 2 jour pour résoudre un bug lié à l’incompréhension d’Internet Explorer 6… et j’ai enfin trouvé la solution à mon problème!! Pour le site Sushis-net que je suis en train de coder, j’avais besoin d’aligner une image en bas à droite de la page, et qu’elle descende en même temps que mon contenu lorsque je scroll!
Dans une CSS classique il suffirait de mettre;

#monbloc {
position:fixed;
right: 0px;
bottom: 0px;
width: 200px;
height: 200px;
}

Evidemment ce code marche sur Firefox, IE7, Netscape et Opera… mais notre cher IE6 est à la traine! il a donc fallu que je trouve une feinte!
Pas mal de sites propose des solutions pour déjouer ce bug mais la plupars positionnaient mon bloc en partant du haut de la page, hors j’avais besoin que ce dernier parte du bas de la page…

J’ai donc trouvé sur ce site un code, qui marche à merveille, Vous trouverez sur le site pleins d’autres façon de positionner un bloc dans vos pages.

#monbloc {
position: absolute;
top:expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop
+(documentElement.clientHeight-this.clientHeight)
: document.body.scrollTop
+(document.body.clientHeight-this.clientHeight));
}

Petite explication;
Grâce à certaines variables de chez Microsoft (ici la variable expression), on peu incorporer du javascript à notre CSS, et donc indiquer une valeure variable à la propriété top:;.

Ensuite, comme ce problème ne concerne que IE6, et pas les autres navigateurs, on va rajouter dans notre header le lien vers une feuille de style externe que pour IE6, de cette façon;

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="style/styleie6.css">
<![endif]-->

Vous trouverez aussi de bonnes informations sur le site d’alsacréations!

  1. Jerry dit :

    J’adore ton site et toutes ces bonnes astuces que tu nous fais profiter ;-) Merci !

  2. Magouya dit :

    De rien! :) ca fait plaisir de partager mes découvertes!

  3. Trackback sur <CODE>BUG WORDPRESS</CODE> dit :

    […] En voulant écrire le sujet IE ET LA POSITION FIXED […]

  4. Eric dit :

    Je cherchait une astuce qui marchait vraiment pour positionner en fixed pour IE… bon l’astuce que tu cites me convient.
    Mais autre chose… ton site est magnifique ! hop dans mon bookmark ^^

  5. Kamchatka dit :

    Genial !!!!
    Un gros bravo et merci pour toutes ces astuces,
    et génial le design (y)
    moi aussi hop dans mes bookmarks
    PS : bon anniversaire en retard :-)

    Kam

Laisser un commentaire