Bonjour,
j'ai un probleme d'afichage de ma page sous IE6
Cela fonctionne parfaitement sur IE7, Opera et Firefox
Mais sur IE, les conteneurs partent de tous les cotés et rien ne se tient.
L'image de background elle aussi est coupée alors que son conteneur fait sa taille exacte....
Voici le fichier CSS
@charset "utf-8";
/* CSS Document */
body {
background-color: #000000;
}
/* page avec image en background*/
html, body {
height: 100%
}
#page {
VISIBILITY: visible;
MARGIN-LEFT: auto;
WIDTH: 980px;
MARGIN-RIGHT: auto;
POSITION: relative;
background-color: #000000;
background-repeat: no-repeat;
background-position:center 30px;
height: 750px;
zoom:1;
background-image: url(images/page.jpg);
}
/* Box 1: menu de navigation*/
#box1 {
height: 20px;
width: 530px;
position: relative;
visibility: visible;
margin-top: 180px;
float: right;
margin-right: 70px;
background:#8F8F8F;
}
/* Box 2: affichage des images*/
#box2 {
height: 200px;
width: 305px;
position: relative;
visibility: visible;
margin-top: 440px;
float: left;
margin-left: 55px;
background:#8F8F8F;
}
/* Box 3: rapppel de l'adresse en gris*/
#box3 {
height: 20px;
width: 500px;
position: relative;
visibility: visible;
float: left;
margin-left:80px;
margin-top: 70px;
color: #8F8F8F;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
background:#8F8F8F;
}
/* Box 5: texte*/
#box5 {
height: 360px;
width: 500px;
position: relative;
visibility: visible;
float: left;
margin-left:80px;
margin-top: 10px;
color:#000000;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
background:#8F8F8F;
}
/* Box 6: pied de page*/
#box6 {
height: 20px;
width: 880px;
position: relative;
visibility: visible;
float: left;
margin-top: 10px;
margin-left: 50px;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
color: #AF0D18;
font-weight: bold;
background:#8F8F8F;
}
et le fichier HTML simplifié:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="styleaccueil.css" rel="stylesheet"
type="text/css" media="screen" />
</head>
<body>
<div id="page">
<div id="box1"></div>
<div id="box2"> </div>
<div id="box3"></div>
<div id="box5"></div>
</div>
</body>
</html>
Voila si quelqu'un a une idée qui pourrait m'aider a résoudre ce problème très génant...... moi je sèche complètement... la ca dépasse mes capacités!
Merci d'avance..
Cordialement...