28172 sujets

CSS et mise en forme, CSS3

Décalage du background.

Bonjour à tous.
J'ai un problème de décalage de quelques px de mon image de fond entre les différents navigateurs.
http://lens-basket.org/temp/blanche.php
le code html : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<base href="http://lens-basket.org/temp/" />
	<title></title>
	<link rel="stylesheet" href="http://lens-basket.org/temp/style1.css" type="text/css" media="screen" title="no title" charset="utf-8" />
</head>

<body>

<div id="header">

<a href="#" id="forum" style=""><img src="images/forum-off.gif" style="display:none;" alt=""/></a>
<a href="#" id="contact" style=""><img src="images/contact-off.gif" style="display:none;" alt=""/></a>
</div> 
<div id="main" style="height:400px;">
</div>
</body>
</html>

Style CSS : 

* {
	margin: 0;
	padding: 0;
}
body {
	font-family: verdana;
	font-size:12px;
	margin: 0;
	padding: 0;
	background: #000 url(images/graphisme-lens-basket.jpg) no-repeat 50% top;
}
#header {
	height: 320px;
	width: 958px;
	margin: 0 auto;
	position: relative;
	background: transparent url(images/graphisme-lens-basket.jpg) no-repeat 50% top;
}
#main {
	width: 958px;
	margin:auto;
	background: red;
}
a#forum { background: url(images/forum-on.gif) no-repeat top center;width:170px;height:21px;position:absolute;top:208px;left:88%;font-size:13px;color:#000;}
a#forum:hover { background: url(images/forum-off.gif) no-repeat top center;width:170px;height:21px}
a#contact { background: url(images/contact-on.gif) no-repeat top center;width:170px;height:29px;position:absolute;top:175px;left:88%;font-size:13px;color:#000;}
a#contact:hover { background: url(images/contact-off.gif) no-repeat top center;width:170px;height:29px}


Comment faire pour résoudre ce problème ?

Merci à tous pour vos contributions.
Modifié par _yan_ (14 Sep 2009 - 16:27)
Bonjour.
Le décalage est présent dans FF 3.5.3.
Il n'est pas présent dans IE7 ni Google Chrome ni IE8.
Si tu as la possibilité de faire la comparaison avec IE8 :
En résolution 1024x768, un décalage d'un pixel blanc apparait à droite dans IE 8 et rien dans FF3.5
En résolution 1680 x 1050, un décalage d'un pixel blanc apparait à droite dans ff3.5 et rien dans IE8.

De la même façon les images pour la partie 'contact' et 'forum' se décalent d'un px suivant la résolution et le navigateur.
Je n'ai qu'IE6 ici, mais ce que tu décris ressemble à un simple problème de calcul d'arrondi, pour le 50%.

Tu as deux solutions, soit tu positionne ton background autrement, soit tu donne une couleur au background qui sera raccord avec l'image.
Sujet clos
Aller à