28220 sujets

CSS et mise en forme, CSS3

[RESOLU] - Probleme d'alignement Sous IE, OK Sous FF

Bonjour à toutes et à tous,

Je suis confronté au traditionnel problème d'alignement IE/FF.


  <body>
    <div id="container" >
      <div id="header">
     </div>
    </div>
  </body>


avec comme code CSS


body {
	font-family: verdana, arial, sans-serif;
	margin: 0px;
	background: url(../img/bordure.gif) #EEE repeat-y top center;
	color:#fff;
 	padding-bottom: 10px; 
	text-align:center;
}
#container {
	width: 800px;
	margin:  0px auto 0px auto;
	position: relative;
}
/* Balise de header  */
#header {
	width: 800px;
	height: 70px;
	background-image: url(../img/logo.gif);
}


Le probleme : mon image background déapsse de 1 pixel a gauche sur IE (centrage décalé à gauche), et est parfaitement aligné sous FF.

Avez-vous une idée de résolution ?

SI on redimensionne la page IE tout doucement (-1 px) et ben le probleme disparait, cela viendrait donc du calcul du milieu de la page et de l'arrondi au pixel supérieur ou inférieur ... qq1 a une idée ?

Le probleme est également décrit ici pour un autre webmaster : http://www.webmaster-hub.com/lofiversion/index.php/t29306.html
sans solution...

Merci

Titanic
Modifié par Titanic (02 Feb 2007 - 21:36)
Salut,

Pourrai-tu s'il te plait mettre une image agrandie du problème ? Car même avec une bonne vue elle n'est pas si visible que ça, la différence.

Et avec quelle version de IE est-ce décalé ?
Merci
Modifié par Ralfman68 (28 Nov 2007 - 22:20)
Deux choses :

- Pour commencer, pourrais-tu éditer ton message pour respecter la mise en forme du forum, et baliser le code cité avec les balises [ code] [ /code] (sans les espaces après les crochets ouvrants). Merci d'avance. Smiley smile

- Pour ton problème, cela vient effectivement des difficultés (de tous les navigateurs, d'ailleurs, pas spécifiquement d'IE) à calculer au pixel lors du centrage d'un élément ou d'une image de fond. La solution consiste à placer l'image de fond non pas sur body, mais comme image de fond d'un conteneur global, qui sera alors centré (technique des marges automatiques).
Bonjour, le problème est résolu en sortant le header du container et en lui mettant le css

body {
	font-family: verdana, arial, sans-serif;
	margin:0px;
	background: url(../img/bordure.gif) #eee repeat-y top center;
	padding: 0px;
}

#container {
	width: 800px;
 	margin: 0px auto 0px auto;
	min-height: 100% ;
	padding: 25px 0px 10px 0px;
}
/* Balise de header  */
#header {
	height: 70px;
	background: url(../img/logo.gif) transparent no-repeat top center;
}
Sujet clos
Aller à