5568 sujets

Sémantique web et HTML

Problème sous Internet Explorer - décalage des backgrounds

Bonjour à tous,

j'ai eu une désagréable surprise récemment sous Internet Explorer pour mon dernier template. J'ai partitionné mon site en divs et chacune des parties contient un background (répété ou non, selon les besoins graphiques). Le problème survient en 1280*1024 sous Internet Explorer (il existe aussi un problème sous netscape et opéra mais je peux y remédier avec du javascript). Le background du body, lorsqu'on resize le template, se décale parfois (tout le temps, ça serait trop beau Smiley ohwell ) d' 1 pixel, ce qui est très chatoyant visuellement, comme vous pouvez vous en douter...

Voici le code html de la page : 


<!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="en" lang="en">
<head>
	<title></title>
	
	<link href="css/styles.css" rel="stylesheet" type="text/css" />
	
	<script type="text/javascript">
		<!--
		function getWindowHeight() {
			var windowHeight = 0;
			if (typeof(window.innerHeight) == 'number') {
				windowHeight = window.innerHeight;
			}
			else {
				if (document.documentElement && document.documentElement.clientHeight) {
					windowHeight = document.documentElement.clientHeight;
				}
				else {
					if (document.body && document.body.clientHeight) {
						windowHeight = document.body.clientHeight;
					}
				}
			}
			return windowHeight;
		}
		function setFooter() {
			if (document.getElementById) {
				var windowHeight = getWindowHeight();
				if (windowHeight > 0) {
					if (document.getElementById('left').offsetHeight > document.getElementById('right').offsetHeight)
						var partHeight = document.getElementById('left').offsetHeight;
					else
						var partHeight = document.getElementById('right').offsetHeight;
						
					if (document.getElementById('container').offsetHeight  > partHeight)
						var contentHeight = document.getElementById('container').offsetHeight;
					else
						var contentHeight = partHeight;
                                                
					var contentElement = document.getElementById('container');

					if (((windowHeight - 307) - contentHeight) < 0) {
						contentElement.style.height = contentHeight + 'px';
					}
                             else {
                                    contentElement.style.height = (windowHeight - 307) + 'px'; 
                                    }
				}
			}
		}
		window.onload = function() {
			setFooter();
		}
			
		window.onresize = function() {
			setFooter();
		}
		//-->
		</script>
	
</head>

<body>

	<div id="top">

	</div>

	<div id="root">

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

		<div id="left"></div>
		
		<div id="right"></div>
	
	</div>
	
	<div id="footer">
	
	</div>
	
</body>
</html>


ainsi que le code css lié :


html {
	margin: 0px;
	padding: 0px;
}
body {
	margin: 0px;
	padding: 0px;
	background-image: url(../i/back.jpg);
	background-repeat: repeat-y;
	background-position: center;
	background-color: #EFEFEF;
}
#top {
	position: relative;
	width: 980px;
	height: 186px;
	margin: 0px auto;
	background-image: url(../i/top.jpg);
	background-position: center;
	background-repeat: no-repeat;
}
#root {
	position: relative;
	width: 980px;
	height: 91px;
	margin: 0px auto;
	background-image: url(../i/root.jpg);
	background-position: center;
	background-repeat: no-repeat;
}
#container {
	position: relative;
	width: 980px;
	height: 483px;
	min-height: 483px;
	margin: 0px auto;
	background-image: url(../i/container.jpg);
	background-position: bottom left;
	background-repeat: no-repeat;
}
#container #left {
	
}
#footer {
	position: relative;
	width: 980px;
	height: 30px;
	margin: 0px auto;
	background-image: url(../i/footer.jpg);
	background-position: bottom left;
	background-repeat: no-repeat;
}


Les hauteurs désignées pour les différents divs sont en conséquence de la hauteur du background à respecté pour ces parties (elles ne sont pas là par hasard, pour résumé...).

D'habitude, on me dit que je ne suis pas clair du tout mais n'hésitez pas à me le faire savoir si c'est le cas ici aussi Smiley sweatdrop .
orgied a écrit :
D'habitude, on me dit que je ne suis pas clair du tout mais n'hésitez pas à me le faire savoir si c'est le cas ici aussi Smiley sweatdrop

Disons que c'est plutôt clair, mais qu'avec une page déjà en ligne pour mieux visualiser le problème, tester avec différents navigateurs, voire tester des solutions en direct (web developper toolbar, je t'aime), c'est juste dix fois plus pratique.

Parce que moi les gros blocs de code ça me décourage un peu, en fait.
Mais ce n'est pas forcément le cas de tout le monde.
Je suis désolé mais je ne pourrai pas vous présenté le chosage en ligne, j'ai pas encore l'espace prévu pour ce site Smiley ohwell .

J'ai trouvé une solution...

L'erreur est liée à l'ajout d'un background dans le body de type centré.

Première étape de l'erreur : créé un background d'une largeur de 780px (par exemple), le centrer dans le body et le répéter en Y.

Seconde étape : créé une balise div d'une largeur de 780px et le centrer (margin: 0px auto). Joindre à cette balise le même background que body (oui je sais c'est ridicule mais c'est pour l'exemple).

Le problème : lorsqu'on resize le template sous internet explorer, c'est le décalage d'1px aléatoire très frustrant...

Pour palier à ce problème, et parce que je dois respecter les contraintes graphiques de nos infographistes (... j'ai rien contre eux... Smiley murf ), j'ai ajouté un div dans un div, ça fonctionne parfaitement mais j'aime pas ça...

En espérant toujours avoir été clair, à plus tard Smiley biggrin
Modifié par orgied (19 Apr 2006 - 12:21)
Sujet clos
Aller à