ie7 position rtl ie6 | div absolute ou fixed et sens de lecture de droite à gauche

Home

Web

CSS

div absolute ou fixed et sens de lecture de droite à gauche

Monday, 02 August 2010 15:15

There are no translations available.

Comme souvent, on rencontre de nombreux problèmes d'interprétation selon les navigateurs. Cette fois il s'agit d'un problème de positionnement d'un div absolu sur une page traduite en arabe c'est-à-dire sur une page où le sens de lecture est de droite à gauche.

Pour traduire un site en arabe j'ai utilisé le super composant Joomfish qui se charge de définir le sens de lecture de la page de droite à gauche.
Pour cela le composant définit la balise html de la manière suivante (regardez le dir="rtl") :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ar-dz" lang="ar-dz" dir="rtl" >

La position fixe (position:fixed;) :
Comme dans un positionnement absolu, le contenu concerné est retiré totalement 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.

Dans le cas d'une lecture de droite à gauche, sur ie6 et ie7 (pas de problèmes sur ie8 et Firefox), mon div absolute pourtant bien positionné autrement, se décale vers la droite comme si il ne prenait pas en compte mon margin-left:-50%;

Sous IE6 (le div se décale vers la droite)
Capture problème div absolute sous IE6

Sous IE7 (le div se décale vers la droite)
Capture problème div absolute sous IE7

Sous IE8 (le div se positionne correctement)
Capture problème div absolute sous IE8

En mode normal "ltr", le positionnement du div absolu se fait par rapport à la gauche grâce aux left:50%; et margin-left:-50%.
Lorsqu'on passe en mode "rtl", le div absolu se positionne par rapport au côté droit, il faut donc définir dans le style right:50%; et margin-right:-50%.

Le code ci-dessous corrige le problème :

#menu_absolute {      


    background-image: url('../images/bandeau_menu.jpg');

    background-position: top;

    background-repeat: repeat-x;


        color: #FFFFFF;

        text-align:center;

        top:0px;

        height:80px;

        width:100%;

        float:left;


        left:50%;

        right:50%;

        margin-left:-50%;

        margin-right:-50%;


        position:fixed;

        z-index:110;

}