28173 sujets

CSS et mise en forme, CSS3

Pb background sous IE : cadre avec div en position absolute

Bonjour, aprés de multiples recherches et des heures de ressassement de code Smiley biggol , je me suis enfin décidé à m inscrire pour vous réclamer votre précieuse aide Smiley cligne .

Voici mon probleme, sous IE, je n arrive pas a faire afficher totalement les background de mes div s_l2 et s_r2, bien sur cela fonctionne sous FF.

voici un apercu du bug: bug sous ie

mon code html:

<html>
<head>
	<link rel="stylesheet" href="sid.css">
</head>
<body>
	<div id="positionsite">
		<div id="site">	
			<div id="header"></div>

			<div id="s_tl"></div>
			<div id="s_t"></div>
			<div id="s_tr"></div>
			<div id="s_l1"></div>
			<div id="s_lround"></div>
			<div id="s_r1"></div>
			<div id="body">
				texte bla bla bla bla bla bla bla
				bla bla bla bla bla bla bla	bla
				bla bla bla bla bla bla bla	bla
				bla bla bla bla bla bla bla	bla
				bla bla bla bla bla bla bla	bla
				bla bla bla bla bla bla bla	bla
				bla bla bla bla bla bla bla	bla
				bla bla bla bla bla bla bla	bla
				bla bla bla bla bla bla bla	bla				
				<div id="s_l2"></div>
				<div id="s_r2"></div>			
				<div id="s_bl"></div>
				<div id="s_b"></div>
				<div id="s_br"></div>	
			</div>			
		
		</div>	
	</div>
</body>
</html>


et enfin ma feuille de style :

body {

}
#positionsite {
	position: absolute;
	left: 50%;
	margin-left: -400px;
}
#site {
	position: relative;
	width: 800px;
}
#header {
	position: absolute;
	background-image: url(images/bg.jpg);
	background-repeat: no-repeat;
	height: 200px;
	width: 800px;
	top: 0px;
}
#body {
	position: relative;
	width: 800px;
	top: 260px;
}
/* CADRE du SITE : classe et identifiant */
#s_tl {
	background:transparent url(images/c_tl.png); /* IE6, IE7beta2, Gecko */
	_background:none; /* IE6 */
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/c_tl.png', sizingMethod='scale'); /* IE6 */
	position: absolute;
	height: 50px;
	width: 50px;
	background-repeat: no-repeat;
	top: 0px;
}
#s_t {
	background:transparent url(images/c_t.png); /* IE6, IE7beta2, Gecko */
	_background:none; /* IE6 */
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/c_t.png', sizingMethod='scale'); /* IE6 */
	position: absolute;
	height: 50px;
	width: 700px;
	background-repeat: repeat-x;
	top: 0px;
	left: 50px;
}
#s_tr {
	background:transparent url(images/c_tr.png); /* IE6, IE7beta2, Gecko */
	_background:none; /* IE6 */
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/c_tr.png', sizingMethod='scale'); /* IE6 */
	position: absolute;
	height: 50px;
	width: 50px;
	background-repeat: no-repeat;
	top: 0px;
	left: 750px;
}
#s_l1 {
	background:transparent url(images/c_l.png); /* IE6, IE7beta2, Gecko */
	_background:none; /* IE6 */
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/c_l.png', sizingMethod='scale'); /* IE6 */
	position: absolute;
	height: 90px;
	width: 50px;
	background-repeat: repeat-y;
	top: 50px;
	left: 0px;
}
#s_lround {
	background:transparent url(images/c_lround.png); /* IE6, IE7beta2, Gecko */
	_background:none; /* IE6 */
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/c_lround.png', sizingMethod='scale'); /* IE6 */
	position: absolute;
	height: 120px;
	width: 50px;
	background-repeat: repeat-y;
	top: 140px;
	left: 0px;
}
#s_l2 {
	background:transparent url(images/c_l.png); /* IE6, IE7beta2, Gecko */
	_background:none; /* IE6 */
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/c_l.png', sizingMethod='scale'); /* IE6 */
	position: absolute;	
	height: 100%;
	width: 50px;
	background-repeat: repeat-y;
	top: 0px;
	left: 0px;
}
#s_r1 {
	background:transparent url(images/c_r.png); /* IE6, IE7beta2, Gecko */
	_background:none; /* IE6 */
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/c_r.png', sizingMethod='scale'); /* IE6 */
	position: absolute;
	height: 210px;
	width: 50px;
	background-repeat: repeat-y;
	top: 50px;
	right: 0px;
}
#s_r2 {
	background:transparent url(images/c_r.png); /* IE6, IE7beta2, Gecko */
	_background:none; /* IE6 */
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/c_r.png', sizingMethod='scale'); /* IE6 */
	position: absolute;
	height: 100%;
	width: 50px;
	background-repeat: repeat-y;
	top: 0px;
	right: 0px;
}
#s_bl {
	background:transparent url(images/c_bl.png); /* IE6, IE7beta2, Gecko */
	_background:none; /* IE6 */
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/c_bl.png', sizingMethod='scale'); /* IE6 */
	position: absolute;
	height: 50px;
	width: 50px;
	background-repeat: no-repeat;
	bottom: 0px;
	left: 0px;
	margin-bottom: -50px;
}
#s_b {
	background:transparent url(images/c_b.png); /* IE6, IE7beta2, Gecko */
	_background:none; /* IE6 */
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/c_b.png', sizingMethod='scale'); /* IE6 */
	position: absolute;
	height: 50px;
	width: 700px;
	background-repeat: repeat-x;
	bottom: 0px;
	left: 50px;
	margin-bottom: -50px;
}
#s_br {
	background:transparent url(images/c_br.png); /* IE6, IE7beta2, Gecko */
	_background:none; /* IE6 */
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/c_br.png', sizingMethod='scale'); /* IE6 */
	position: absolute;
	height: 50px;
	width: 50px;
	background-repeat: no-repeat;
	bottom: 0px;
	right: 0px;
	margin-bottom: -50px;
}


J'aimerai garder mon positionnement en absolute par rapport a ma div site car je souhaite jouer ensuite sur les z index pour ajouter mes menus.
Modifié par antoniodelasvegas (04 Sep 2006 - 21:37)
Sujet clos
Aller à