Bonsoir à tous, 
ça fait un moment que je séche sur la question et je crois qu'un peu d'aide me serait utile avant que je pète un plomb !
Je m'explique. J'ai fait une page où je désire mettre des effets d'ombres sur les conteneurs principaux (header, corps et footer). Je me sers d'une image dans un bloc que je décale par rapport au bloc conteneur concerné pour recréer l'illusion d'une ombre sur ce conteneur.
J'ai essayé plusieurs méthodes mais à chaque fois ça marche bien sur les autres navigateurs mais le gros problème, c'est qu'IE fait encore des siennes
Lorsque l'on redimensionne de façon manuelle la fenêtre du navigateur en agrandissant ou diminuant la largeur, il se produit un effet désagréable sous IE que je qualifierais de "yo-yo" : le bloc qui sert pour faire l'ombre ne reste pas centré mais se déplace de gauche à droite !
alors qu'il reste normalement centré sous Firefox par exemple ... 
Et je vois pas pourquoi ...
Je vous donne le lien vers voir la page en ligne
avec aussi un lien vers la page css
Et pour ceux qui préférent voir le code sur le forum :
pour le xHTML :
Code pour le CSS :
Merci d'avance à tout ceux qui m'aideront !
ça fait un moment que je séche sur la question et je crois qu'un peu d'aide me serait utile avant que je pète un plomb !
Je m'explique. J'ai fait une page où je désire mettre des effets d'ombres sur les conteneurs principaux (header, corps et footer). Je me sers d'une image dans un bloc que je décale par rapport au bloc conteneur concerné pour recréer l'illusion d'une ombre sur ce conteneur.
J'ai essayé plusieurs méthodes mais à chaque fois ça marche bien sur les autres navigateurs mais le gros problème, c'est qu'IE fait encore des siennes
Lorsque l'on redimensionne de façon manuelle la fenêtre du navigateur en agrandissant ou diminuant la largeur, il se produit un effet désagréable sous IE que je qualifierais de "yo-yo" : le bloc qui sert pour faire l'ombre ne reste pas centré mais se déplace de gauche à droite !
alors qu'il reste normalement centré sous Firefox par exemple ... Et je vois pas pourquoi ...
Je vous donne le lien vers voir la page en ligne
avec aussi un lien vers la page css
Et pour ceux qui préférent voir le code sur le forum :
pour le xHTML :
<!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>
<title>Webown - kit "Club de Foot" (exemple de titre)</title> <!-- Titre du site web tel qu'il apparaît dans la barre supérieure du navigateur -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Foot Passion" href="foot-test3.css" />
</head>
<body>
<div id="global">
<div class="ombre">
<div class="boite">
<div id="header">
<p>
www.monsite.com
</p>
</div>
</div>
</div>
<br style="clear:both;" />
<div class="ombre">
<div class="boite">
<!-- DEBUT DU CONTENEUR -->
<div class="conteneur">
<!-- DEBUT DE LA COLONNE "MENU" DE GAUCHE-->
<div id="menu_gauche">
<img src="kit/logo_asnl.gif" id="logo_asnl" alt="Logo de l'ASNL" title="" width="150" height="70" />
<!-- DEBUT DU MENU -->
<!-- début des lignes à recopier pour ajouter une rubrique dans le menu -->
<div class="rubrique">
<div class="rub1"><img src="kit/ballon.gif" alt="" width="40" height="80" class="gau" /><h2>Rubrique 1</h2></div> <!-- titre de la rubrique -->
<!-- début des liens -->
<a href="#page1">Lien 1</a> <!-- ligne à recopier pour ajouter un lien ( vous pouvez aussi supprimer certaines lignes-->
<a href="#page2">Lien 2</a>
<a href="#page3">Lien 3</a>
<a href="#page4">Lien 4</a>
<a href="#page5">Lien 5</a>
<!-- fin des liens -->
</div>
<!-- début des lignes à recopier pour ajouter une rubrique dans le menu -->
<div class="rubrique">
<div class="rub2"><img src="kit/ballon.gif" alt="" width="40" height="80" class="gau" /><h2>Rubrique 2</h2></div> <!-- titre de la rubrique -->
<!-- début des liens -->
<a href="#page6">Lien 1</a> <!-- ligne à recopier pour ajouter un lien ( vous pouvez aussi supprimer certaines lignes-->
<a href="#page7">Lien 2</a>
<a href="#page8">Lien 3</a>
<a href="#page9">Lien 4</a>
<a href="#page10">Lien 5</a>
<!-- fin des liens -->
</div>
<!-- fin des lignes à recopier pout ajouter une rubrique dans le menu -->
<!-- début des lignes à recopier pour ajouter une rubrique dans le menu -->
<div class="rubrique">
<div class="rub2"><img src="kit/ballon.gif" alt="" width="40" height="80" class="gau" /><h2>Rubrique 3</h2></div> <!-- titre de la rubrique -->
<!-- début des liens -->
<a href="#page6">Lien 1</a> <!-- ligne à recopier pour ajouter un lien ( vous pouvez aussi supprimer certaines lignes-->
<a href="#page7">Lien 2</a>
<a href="#page8">Lien 3</a>
<a href="#page9">Lien 4</a>
<a href="#page10">Lien 5</a>
<!-- fin des liens -->
</div>
<!-- fin des lignes à recopier pout ajouter une rubrique dans le menu -->
<!-- photo de Kroupi -->
<div id="kroupi">
</div>
<!-- FIN DU MENU -->
</div>
<!-- FIN DE LA COLONNE "MENU" DE GAUCHE-->
<!-- DEBUT DU CORPS DE LA PAGE -->
<div class="corps">
.........................
</div>
<!-- FIN DU CORPS DE LA PAGE -->
<div id="feinte">
</div>
</div>
<!-- FIN DU CONTENEUR -->
</div>
</div>
<br style="clear:both;" />
<!-- DEBUT DU FOOTER -->
<div class="ombre">
<div class="boite">
<div id="footer">
<!-- Liens vers les validateurs du W3C -->
<div class="css_valid">
<a href="http://validator.w3.org/check?uri=referer"><img src="kit/valid-xhtml10.png" alt="Valid XHTML 1.0 Strict" /></a>
</div>
<div class="css_valid">
<a href="http://jigsaw.w3.org/css-validator/"><img src="kit/vcss.png" alt="css valid" /></a>
</div>
<!-- signature : NE PAS ENLEVER !!! Merci de la laisser [cligne] -->
<div id="signature">
<p>
Created by Pandore for <a href="http://www.webown.net">Webown ©</a>
</p>
</div>
<!-- signature du webmaster du site -->
<div id="webmaster">
<p>
Webmaster de ce site : votre nom
</p>
</div>
</div>
</div>
</div>
<!-- FIN DU FOOTER -->
<br style="clear:both;" />
</div>
</body>
</html>
Code pour le CSS :
#global
{
width:800px;
margin:auto;
text-align:center;
}
.ombre
{
float:left;
clear:left;
background: url(kit/ombre1.png) no-repeat bottom right;
margin: 10px 0 10px 10px !important;
margin: 10px 0 10px 5px;
padding: 0px;
}
.boite
{
position:relative;
bottom:6px;
right: 6px;
}
.conteneur
{
display: block;
position: relative;
width:785px;
background-color: #fff;
border: 1px solid #a9a9a9;
padding: 0px;
color: #777;
background-color: #fff;
background-image:url(kit/fond-conteneur2.jpg);
background-repeat:repeat;
font: italic 1em georgia, serif;
}
#header
{
display: block;
position: relative;
width:785px;
height:150px;
background-color: #fff;
border: 1px solid #a9a9a9;
padding: 0px;
color: #777;
font: italic 1em georgia, serif;
background-color: #fff;
background-image:url(kit/fond-conteneur.jpg);
background-repeat:repeat;
}
#header p
{
color:black;
font-size:2.0em;
margin-left:40px;
margin-top:40px;
text-align:left;
}
#footer
{
display: block;
position: relative;
width:785px;
height:42px;
background-color: #fff;
border: 1px solid #a9a9a9;
padding: 0px;
color: #777;
font: italic 1em georgia, serif;
background-color: #fff;
background-image:url(kit/fond-conteneur.jpg);
background-repeat:repeat;
}
body
{
background-color:white;
width:800px;
margin:auto; /* centrer la page */
margin-top:20px; /* espace avec le haut de la fen?tre du navigateur */
margin-bottom:20px; /* espace avec le bas de la fen?tre du navigateur */
padding:0px;
}
#logo_asnl
{
width:150px;
height:70px;
margin-top:8px;
margin-bottom:12px;
}
#menu_gauche
{
width:150px;
float:left;
margin:0px;
padding:0px;
padding-left:8px;
text-align:center;
}
#menu_gauche .rubrique
{
width:150px;
margin:0px;
padding:0px;
border:0px;
}
#menu_gauche .rubrique .rub1 /* pour le titre de la rubrique */
{
width:143px;
height:80px;
margin:0px;
padding-left:5px;
border:none;
color:white;
font-family:"Times New Roman", serif;
font-size:1.0em;
text-align:left;
background-image:url("kit/rub1_onglet.jpg");
background-repeat:no-repeat;
}
#menu_gauche .rubrique .rub2 /* pour le titre de la rubrique */
{
width:143px;
height:80px;
margin:0px;
padding-left:5px;
border:none;
color:white;
font-family:"Times New Roman", serif;
font-size:1.0em;
text-align:left;
background-image:url("kit/rub1_onglet2.jpg");
background-repeat:no-repeat;
}
#menu_gauche .rubrique .rub2 h2 , #menu_gauche .rubrique .rub1 h2 /* pour le titre de la rubrique */
{
width:100px;
margin-left:40px;
margin-top:0px;
margin-bottom:0px;
margin-right:0px;
padding:0px;
padding-top:35px;
color:white;
font-family:"Times New Roman", serif;
font-size:1.0em;
text-align:left;
}
#menu_gauche .rubrique .rub1 img , #menu_gauche .rubrique .rub2 img
{
margin:0px;
padding:0px;
border:none;
}
.gau
{
float:left;
}
#menu_gauche .rubrique a
{
display:block;
width:143px;
height:20px;
margin:0px;
padding-left:5px;
border:none;
color:black;
background-image:url("kit/fond_a.jpg"); /* couleur utilis�e : #e71818 */
background-repeat:repeat;
font-family:"Times New Roman", serif;
font-size:1.0em;
text-decoration:none;
}
#menu_gauche .rubrique a:visited
{
font-family:"Times New Roman", serif;
font-size:1.0em;
text-decoration:none;
color:black;
}
#menu_gauche .rubrique a:hover
{
font-family:"Times New Roman", serif;
font-size:1.0em;
text-decoration:overline underline;
color:white;
}
.corps
{
width:585px;
margin:auto;
margin-top:0px;
margin-bottom:0px;
margin-left:170px;
border-left:none;
text-align:justify;
font-family:"Times New Roman", serif;
color:black; /* couleur du texte dans le corps de la page */
font-size:1.0em; /* taille du texte dans le corps de la page */
padding:0px;
background-image:url("kit/fond_corps.png");
background-repeat:repeat; /*repete ou non le motif avec les joueurs de foot */
background-position:top;
}
.corps a {color:green;text-decoration:underline; font-weight:bold;}
.corps a:visited {color:gray;text-decoration:none;}
.corps a:hover {color:blue;text-decoration:none;}
.corps h3
{
margin-top:7px;
margin-bottom:10px;
margin-left:17px;
padding-left:17px;
font-family: "Trebuchet ms", serif;
color:green;
font-size:1.5em;
border-bottom:4px solid green;
}
.corps h1
{
margin-top:7px;
margin-bottom:7px;
font-family: "Trebuchet ms", serif;
font-size: 2.4em;
text-align:center;
color:black;
}
.corps p
{
margin-top:5px;
margin-bottom:15px;
margin-left:25px;
margin-right:15px;
}
#signature , #webmaster
{
float:left;
width:200px;
margin:0px;
padding:0px;
color:black;
font-family:"Trebuchet ms", serif;
font-size:0.7em;
text-align:center;
}
#signature p , #webmaster p
{
margin-bottom:0px;
margin-top:14px;
margin-left:15px;
}
#signature a {color:green;text-decoration: none;}
#signature a:visited {color:gray;text-decoration:none;}
#signature a:hover {color:blue;}
.css_valid a img , #firefox a img
{
border:none;
}
.css_valid
{
float:left;
margin-top:6px;
margin-left:40px;
border:0px;
}
#firefox
{
margin-top:1px;
margin-left:60px;
border:0px;
}
#kroupi
{
width:150px;
height:228px;
margin:0px;
padding:0px;
background-image:url("kit/kroupi-bloc.jpg");
background-repeat:no-repeat;
}
#feinte
{
width:600px;
height:0px;
clear:both;
}Merci d'avance à tout ceux qui m'aideront !