28173 sujets

CSS et mise en forme, CSS3

[Resolu] Décalage image avec IE

Bonjour,

Dans mon 'body' j'ai placé une image de fond constituée d'une ligne bleue que je déroule sur la hauteur de la page.
Dans un div je place une image qui reprend cette ligne bleue mais sous IE il y a un décalage d'un pixel avec la ligne bleue du body. Sous Firefox pas de problème Smiley cligne

Si quelqu'un pouvait m'aider dans mon code CSS ?

Merci

body, html {
	background: #fff url("../images/com4_modele_01_bande.jpg") repeat-y 50% 0;
	margin: 0;
	padding: 0;
	text-align: left;
	font: 11px/1em verdana, arial, helvetica, sans-serif;
}

#content {
	background: url("../images/com4_modele_01.jpg") no-repeat;
	font: normal 1em/1em Verdana, Arial, Helvetica, sans-serif;
	width: 1100px; 
	padding: 0;
	margin: 0 auto;
	min-height: 600px;
	height: auto !important;
	height: 600px;
}
upload/2059-Sans-titre-.jpg
Modérateur
bonsoir,

sans les images incriminé , c'est a l'aveuglette.

peut-etre remplacé 50% par center , ça veut dire la même chose , mais a savoir si IE n'a pas 2 mode de calcul ... ,il a bien 2 moteurs de rendus ...

Pour evité un decrochage d'un fond centré sur html ou body et avec un conteneur centré en margin:auto; , une regle toute bete consiste a utilisé des "elements" et images qui ont des largeurs en chiffre "pairs" . , ça evitent les decrochage dans IE.

ce decallage est permanent ? ou selon la largeur de la fenetre ?

++
Mes images ont des largeurs en chiffre pairs.

Mais par contre le décalage n'est pas constant. Suivant que j'agrandis ou diminue la fenêtre il y a ou il n'y a pas ce décalage d'un pixel. Dans le cas d'une fenêtre pleine écran il y par exemple le décalage Smiley decu
Modérateur
arf,

peut tu metre les images en lien et le code de base de ta page ?
(doctype en particulier )
++

<edit :00h50 , ++ je decroche

a tout hasard ,
essaie de jouer sur la marge gauche de html -1px ou un padding de 1px.
Il y a parfois un petit pixel "fantome" qui prend la tête
/>
Modifié par gcyrillus (28 Oct 2006 - 00:51)
Je regarde ça pour le pixel négatif. Sinon voici le code html (le css étant en haut de cette page)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<title>TEST</title>
<meta NAME="revisit-after" CONTENT="20 days">
<meta name="robots" content="index,follow">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="false">
<link rel="stylesheet" type="text/css" href="../styles/marie.css">
</head>

<body>
<div id="content">
</div>

</body>
</html>

Merci pour ton aide...
Je pense avoir résolu le pb avec 

body, html {
	background: #fff url("../images/com4_modele_01_bande.jpg") repeat-y 50% 0;
	margin: 0 !important; /* Mozilla */
	margin: 0 0 0 1px; /* IE */
	padding: 0;
	text-align: left;
	font: 11px/1em verdana, arial, helvetica, sans-serif;
}

Modifié par Iris (28 Oct 2006 - 14:55)
Sujet clos
Aller à