css: firefox ajoute la taille de la scollbar à un div

Marsh Posté le 15-06-2005 à 14:06:51

Hello,

J'ai le code HTML suivant:

Code :

<div id="content">
<div id="content-left"></div>
<div id="content-right"></div>
</div>

et le CSS :

Code :

#content
{
position: relative;
background-color: #336699;
overflow: auto;
width: 980px;
margin-left: auto;
margin-right: auto;
padding: 15px;
}
#content-left
{
float: left;
background-color: #FAFAFA;
width: 305px;
height: 300px;
}
#content-right
{
float: right;
background-color: #F098B7;
width: 629px;
}

Jusque là tout va bien... si maintenant je mets suffisament de texte dans 'content-right' pour que la scrollbar verticale du navigateur apparaisse, le padding droit change dans 'content' sous firefox (pas ss IE). Il semble que ff ajoute la taille de la scrollbar au padding droit du div.

Est-ce un bug ? Que puis-je faire pour bien avoir 15px de padding à droite dans 'content', quelle que soit la taille du contenu (qu'il y ait besoin d'une scrollbar ou pas), et surtout que j'ai le meme résultat ss IE et FF ?

Merci d'avance !!

Message édité par nero_fr le 15-06-2005 à 14:07:37

Reply

Marsh Posté le 15-06-2005 à 14:06:51

Reply

Marsh Posté le 15-06-2005 à 15:57:01

nero_fr a écrit :

Hello,
et surtout que j'ai le meme résultat ss IE et FF ?

si tu es croyant tu peux toujours tenter une prière!!!

à part ça ces 2 naviguateurs interprètent la norme de façons différentes (en général c'est firefox + gecko qui gagne).

en faisant une recherche, tu glaneras ptet 2 ou 3 trucs utiles, mais bon, est-ce que ça en vaut la peine....

Reply

Marsh Posté le 15-06-2005 à 17:16:37

C'est pas firefox gagne, c'est qu'il est respectueux des standards, et qu'IE non. De plus IE calcule les marges avec sa propre méthode.

Utilise l'astuce du tiret bas devant une propriété, ca sera compris par ie, mais pas lu par firefox car pas conforme.

genre

Code :

width:20px; // pour firefox
_width:40px; // pour ie seulement, firefox gardera donc 20px, et ie prendre 40px;

Voilou. Il y a une autre méthode qui permet de rester valide, mais c'est plus long à écrire. Florent ou masklinn te guideront surement mieux sur ce point la

Edit : penses aussi a ie7, c'est un ensemble de js et de css qui corrige les manques dans l'implémentation des css et corrige le modèle de calcul de marges. Cherche sur google