Bonjour,
Pour changer un problème d'affichage sous IE (tout va bien sous firefox, safari et mozilla).
Je n'avais pas encore rencontré ce problème jusqu'à maintenant dans mes mises en page.
Voici une image (c'est plus parlant!) de mon problème:
Voici le code CSS :
CODE
html { font-size: 100%; /*height: 100%;*/ }body, form, select, imput, table { margin:0; padding:0; }
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #0075bb;
text-align: center;
color: #0075bb;
height:100%
}
#container {
width: 900px;
background: #FFFFFF;
margin: 10px auto;
text-align: left;
}
#header {
background: #FFFFFF;
margin: 0;
}
#sidebar1 {
float: left;
width: 145px;
background: #FFFFFF;
}
#sidebar2 {
float: right;
width: 170px;
background-image:url(../../images/sidebar2_fond_news.jpg);
background-repeat:no-repeat;
background-position:bottom;
background-color:#FFFFFF;
min-height: 512px;
}
#mainContent {
background-image:url(../../images/mainContent_fond.jpg);
background-repeat:no-repeat;
background-position:top;
background-color:#FFFFFF;
margin: 0 170px 0 145px;
}
#footer {
padding: 10px 10px 10px 20px;
background:#FFFFFF;
border-top: 2px solid #f3c301;
border-bottom: 2px solid #f3c301;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
Voici le code de la page :
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Centre de création du XIX</title>
<!-- lien avec la page de scripts javascript externe -->
<script language="Javascript" type="text/javascript" src="data/js/rollover.js"></script>
<!-- lien avec la page de styles externes -->
<link rel="stylesheet" type="text/css" href="data/css/structure.css">
<!--[if IE]>
<style>
/* placer les corrections pour toutes les version d'IE dans ce commentaire conditionnel */
#mainContent { height: 512px;} /*affichage de l'hauteur de l'image d'arrière plan en totalite sous IE*/
#sidebar2 { height: 512px;} /*affichage de l'hauteur de l'image d'arrière plan en totalite sous IE*/
</style>
<![endif]-->
<!--[if IE 7]>
<style>
/* placer les corrections pour toutes les version d'IE dans ce commentaire conditionnel */
#mainContent { zoom: 1; }*/
</style>
<![endif]-->
</head>
<body class="thrColFixHdr" onload="MM_preloadImages('images/bt_home_on.gif','images/bt_contact_on.gif','images/bt_accueil_on.png','images/bt_quisommesnous_on.png','images/bt_spectacles_on.png','images/bt_formations_on.png','images/bt_actualites_on.png','images/bt_contact_on.png')">
<div id="container">
<div id="header"><img src="images/header_fond.png" alt="logotype" width="730" height="108" title="" /><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('bt-accueil','','images/bt_home_on.gif',1)"><img src="images/bt_home_off.gif" alt="Retour accueil" name="bt-accueil" width="72" height="108" border="0" id="bt-accueil" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('bt-contact','','images/bt_contact_on.gif',1)"><img src="images/bt_contact_off.gif" alt="Envoyez un message au Centre de Création du 19" name="bt-contact" width="98" height="108" border="0" id="bt-contact" /></a></div>
<!-- fin de #header -->
<!-- colonne de gauche -->
<div id="sidebar1"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('accueil','','images/bt_accueil_on.png',1)"><img src="images/bt_accueil_off.png" alt="Retour page d'accueil" name="accueil" width="145" height="69" border="0" id="accueil" /></a><a href="qui-sommes-nous.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('quisommesnous','','images/bt_quisommesnous_on.png',1)"><img src="images/bt_quisommesnous_off.png" alt="Qui sommes-nous ?" name="quisommesnous" width="145" height="37" border="0" id="quisommesnous" /></a><a href="spectacles-centre-de-creation-du-19.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('spectacles','','images/bt_spectacles_on.png',1)"><img src="images/bt_spectacles_off.png" alt="Les spectacles à voir et ceux déjà vus" name="spectacles" width="145" height="39" border="0" id="spectacles" /></a><a href="ateliers-formations-theatre.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('formations','','images/bt_formations_on.png',1)"><img src="images/bt_formations_off.png" alt="Formations et interventions" name="formations" width="145" height="52" border="0" id="formations" /></a><a href="actualites-spectacles.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('actualites','','images/bt_actualites_on.png',1)"><img src="images/bt_actualites_off.png" alt="Actualités du Centre de Création du XIX" name="actualites" width="145" height="42" border="0" id="actualites" /></a><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/bt_contact_on.png',1)"><img src="images/bt_contact_off.png" alt="Contactez le Centre de création du 19" name="contact" width="145" height="41" border="0" id="contact" /></a><img src="images/sidebar1_illustration.jpg" alt="illustration" title="Compagnie de théatre" width="145" height="232" /></div>
<!-- fin de #sidebar1 -->
<!-- colonne de droite -->
<div id="sidebar2"><img src="images/sidebar2_illustration.gif" alt="illustration" width="170" height="253" />
<p> </p>
<!-- fin de #sidebar2 -->
</div>
<!-- colonne centrale -->
<div id="mainContent"><img src="images/titre_accueil.png" alt="titre-accueil" width="246" height="23" class="PaddingP_accueil" title="Centre de création du XIX" />
<h3 class="PaddingP_accueil">Spectacles et interventions artistiques pour ensoleiller, permettre et enrichir lExpression</h3>
<p class="PaddingP_accueil">Depuis 1995, </p><br class="clearfloat" /></div>
<!-- pied de page -->
<div id="footer">
<ul>
<li><a href="index.html" title="">Accueil</a></li> |
<li><a href="qui-sommes-nous.html" title="">Qui sommes-nous ?</a></li>
</ul>
<!-- fin de #footer -->
</div>
<!-- fin de #container -->
</div>
</body>
</html>
Pouvez-vous m'aider
A l'avance merci
Myriam
