28172 sujets

CSS et mise en forme, CSS3

Probleme background-position + margin-left/right:auto

Salut,

Je viens de tomber sur un problème, impossible de le règler, IE (7 utilisé) fait des siennes, je vous explique :

Prenons une page vide (avec les balises de base avec un dtd Transitional) et dans le body ce html : <div id="a"><div id="b"></div></div>

Coté CSS : 

#a {
        background-image:url(a.png);
	background-position:center;
	background-repeat:repeat-y;
        padding-bottom:20px;
}
#b {
        background-image:url(b.png);
	background-repeat:no-repeat;
	height:50px;
	margin-left:auto;
	margin-right:auto;
	width:500px;
}


Le premier div fait 100% et celui à l'intérieur 500px et il est centré, ici le problème est que sous FF, aucun problème, l'image de fond est parfaitement alignée, mais sous IE, il y à un décalage de 1px !

J'ai mis l'image en pièce jointe pour mieux comprendre.
upload/17567-bug.png

D'après mes tests, cela vient du fait que le background du div A soit centré, et que le div B soit lui même centré (background centré ne donne pas le même résultat qu'un div centré)..

J'espère avoir été assez clair Smiley langue

Merci d'avance
ça ne veindrait pas plutot du box type ?
mets des border et padding 0
Modifié par SpaceFrog (20 Jan 2010 - 08:26)
Pourquoi ne pas avoir deux div de 500px ? donc le premier est centré dans la page.

SpaceFrog > par défaut les div n'ont ni padding ni margin.
SpaceFrog > par défaut les div n'ont ni padding ni margin.


mais il ont un border de 1px qui est selon le navigateur inclut ou non dans les dimensions hors tout... d'ou la différence d'un pixel constatée souvent entre les navigateurs ...
Modifié par SpaceFrog (20 Jan 2010 - 08:33)
SpaceFrog a écrit :
mais il ont un border de 1px qui est selon le navigateur inclut ou non dans les dimensions hors tout...
Selon le doctype (et surtout son absence) et le navigateur, ici, ont part du postulat qu'il y a un doctype.
même résultat sous IE et FFX
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>A &amp; B</title>
<style type="text/css">
#a { 
    background-color:gray;
    padding-bottom:20px; 
} 
#b { 
	background-color:pink;
	height:50px; 
    margin-left:auto; 
    margin-right:auto; 
    width:500px; 
} 
</style>
</head>
<body>
<div id="a">A<div id="b">B</div></div>
</body>
</html>
SpaceFrog > J'ai déjà essayé de tout ca (margin, padding, border) et rien n'y fait

Aureance > J'ai aussi essayé, mais toujours un problème..

Laurie-Anne > Impossible de faire uniquement 2 div de 500 px, il faut absolument que le conteneur fasse 100%..

SpaceFrog > Encore heureux que ca marche avec des background-color ! la justement le problème est lié uniquement dans le cas ou les div contiennent des images ^^

Je mets a disposition les fichiers, vous aurez le code et les images pour tester directement Smiley smile

http://www.expressif.fr/tmp/bug_ie.rar

Voilou Smiley smile
Sujet clos
Aller à