28220 sujets

CSS et mise en forme, CSS3

[résolu] Décalage de 1px avec apparition de scrollbar sous FF

Bonjour à tous,
je vous demande votre aide pour un décalage d'1px sous firefox.
Je veux "arrondir" les angles d'un div global contenant tous les éléments de mes pages, j'ai placé des images aux 4 coins.
sur les pages à contenu "court", qui ne nécessite pas de scrollbar à droite, tout va bien sous IE et FF.
Sur les pages à menu plus long, sous FF, la scrollbar décale la bordure d'1px par rapport à mes images de droite.
Lorsque je rajoute 1px de bordure à mon, "global", le décalage se produit sur les pages à contenu "court".
Je me dis que c'est surement un problème connu.

la structure de ma page:
<body>
  <div id="global">
    <div id="coinhdroit"></div><div id="coinhgauche"></div>
    
    <div id="header">
      
      </div>	
		  
    </div><!--fin de header-->   
	
  <div id="hmenu"> 
      
  </div><!--fin de hmenu-->
  
  <div id="gmenu">
  
	</div><!--fin de gmenu-->
	
    <div id="contenu">
    </div><!--fin de contenu-->
    
	<div id="pied">
  </div><!--pied de page-->
    
    <div id="coinsbas"><div id="coinbdroit"></div><div id="coinbgauche"></div></div>
  </div><!--fin de global-->
</body>


et les styles:
html{
	margin:0;
	padding:0;	
}

body{
	margin:0;
	padding:0;
	color:#000;
	background:#009;
	text-align:center;
	font-family: "Lucida Grande", "Trebuchet MS", Verdana, Lucida, Tahoma, Helvetica, sans-serif;
	font-size: 1em;
}

#global{
  text-align:left;
	width:85%;
	margin:10px auto 10px auto;
	padding:0;
	color:#000000;
	background:#ffffff;
	border-top:0;
	border-right:0;
	border-bottom:solid 10px #000099;
	border-left:0;
}

#header{
  margin:0 0 20px 0;
	padding:0px;
	border:none;
}

#coinhgauche,#coinbgauche,#coinhdroit,#coinbdroit{
  margin:0;
  padding:0;
  width:20px;
  height:20px;
  background-repeat:no-repeat;
}

#coinsbas{
  height:20px;
  clear:both;
}

#coinhgauche{
  float:left;
  background-image:url(images/coinhgauche.gif);
  background-position:left top;
}

#coinbgauche{
  float:left;
  background-image:url(images/coinbgauche.gif);
  background-position:left bottom;
}

#coinhdroit{
  float:right;
  background-image:url(images/coinhdroit.gif);
  background-position:right top;
}

#coinbdroit{
  float:right;
  background-image:url(images/coinbdroit.gif);
  background-position:right bottom;
}

#contenu{
  margin:10px 0 0 200px;
}

#gmenu{
  margin:30px 0 0 10px;
  padding:0;
  float:left;
  width:180px;
  background:#eff4fa;
  text-align:center;
}

#hmenu{
  clear:both;
  height:2em;
  background-color:#eff4fa;/*#CBDAF1;*/
}

#pied{
  clear:both;
  text-align:center;
  height:2em;
  line-height:2em;
}


Si besoin est je vous mettrai davantage de code, mais je pense que le problème doit de trouver dans une de ces parties.

Merci d'avance pour votre aide

Julien
Modifié par energizer (30 Sep 2005 - 15:25)
Merci de ton attention jp949,
j'ai rajouté les éléments dans mon premier post pour une meilleure lisibilité.
Administrateur
Hello,

Attention à l'écriture correcte des URL. Une relecture des règles ou de la FAQ t'expliquera comment les afficher proprement Smiley cligne
Modérateur
bonjour,
une solution simple que j'utilise et propose souvent, .. c'est de faire en sorte que la barre de scroll apparaissent systematiquement Smiley smile en appliquant un: 
html {height:100.1%;}

cette solution permet d'eviter un decalage de centrage en passant d'une page courte vers une longue ..
a plus
Cette astuce marche, elle produit le même décalage partout, je l'ai corrigé en ajoutant un border de 1px à droite.
En plus le contenu ne se décale pas entre une page courte et longue, ça fait coup double !!

Merci pour votre aide

Julien
Sujet clos
Aller à