28234 sujets

CSS et mise en forme, CSS3

[résolu] Hover sur background : différences selon les navigateur

Bonjour,

Je rencontre actuellement des différences d'interprétation sur un hover que j'applique sur un background. En l'occurence sur le div #telephone.

C'est correctement aligné sous IE et Opéra, mais décalé d'un pixel sous FireFox. Quant à Chrome, le hover ne s'applique pas du tout.

Mon css :
html {
	font-size:100%;
}

body {
	margin:10px 0; padding:0;
	background: #464646;
}

#content {
	margin:auto;
	background: #262626 url(images/resiliation_home.png) no-repeat center center;
	width:1073px;
}
html>body #content{height:auto; min-height:700px}

#telephone {
	float:left;
	width:50%;
	height:235px;
}
#telephone:hover {
	background: url(images/haut_gauche2.png) no-repeat 334px 61px;
}


Le html

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

		<div id="television">
		</div>
...			
</div>


Le tout est concrètement visible ici : http://www.resiliation.com/V2/

J'ai essayé de chercher du côté des fusions des marges ou bien encore essayé d'appliquer un padding: 1px 0;

Une idée ?

Merci d'avance
Modifié par Gargamel (03 Sep 2010 - 19:32)
Salut,

il y aura toujours des mini-décalages d'un navigateur à l'autre à partir du moment où ils doivent effectuer un calcul arrondi. C'est le cas lorsque tu indique center center dans le background.

Donc en remplaçant 
background: #262626 url(images/resiliation_home.png) no-repeat center center;
par
background: #262626 url(images/resiliation_home.png) no-repeat 195px 39px;
ça devrait passer puisque le background et le hover auront la même référence (haut / gauche).
J'avais bien conscience du problème de l'arrondi.

Ta soluce marche niquel, je t'en remercie ; il n y a plus de décalage IE/FF/OP.

En revanche ça ne s'affiche pas du tout sur Chrome, j'imagine que là on peut rien faire ... en attendant un éventuelle énième mise à jour non ?

a+
Gargamel a écrit :
En revanche ça ne s'affiche pas du tout sur Chrome
Ben comme je l'avais supprimé je l''ai réinstallé à partir du download disponible (en tout cas aujourd'hui) sur http://www.google.fr/ et je n'ai pas eu de problème. Smiley hmm
Smiley confused Oops, en vidant le cache tout remarchait pour chrome .....

Par contre j'ai appliqué la même chose pour le logo TV (haut à droite), et j'ai re un décalage mais cette fois, il n'y a que ie8 qui se décale... foutu virgule Smiley cligne

Un <!-- IF spécial ie devrait le corriger ..
Sujet clos
Aller à