PB de positionnement css avec IE

Marsh Posté le 18-01-2005 à 15:02:43

Bonjour à tous,

IE me pose quelques soucis avec le site web sur le lequel je suis en train de travailler.
Avec firefox ca marche comme prévu, avec IE c'est tout autre chose.

Au niveau du positionnement, c'est un peu un mixte de positionement absolu, relatif et de float.
Je sais c'est pas super clean, mais le site doit etre skinnable,
et donc les differents contenus ne viennent pas forcement dans l'ordre dans lequel ils sont affichés.

ce qui me pose probleme ce sont les titres (avec la bordure rouge) qui sont en position absolue.
Apparament IE n'aime pas le float pour image ni les padding/margin et les decalent en consequence.

Y a-t-il un moyen simple de resoudre ça sans passer par un css hack?

bon affichage (Firefox)

Mauvais affichage (IE)

le code html+css de la page

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>test page</title>
<style type="text/css">
a:link,a:visited, a:active { color: #131C6C; text-decoration: none; }
a:hover {color: black; background-color: #eeeeee;text-decoration: underline; }
body{background-color: #A0A0A0; }
img{border:0px; vertical-align:center;}
#box{
width:800px;
margin:auto;
font-family: Arial, Verdana, Helvetica, Sans-Serif;
font-size: 8pt;
}
#menu{
padding:10px;
margin:5px 0px 5px 0px;
background-color: #eeeeee;
font-size:10pt;
font-weight:800;
text-align:center;
border:dashed 2px #A5A5A5;
}
#contentBox{
background-color: #eeeeee;
background-image:url(styles/skin_default/pellicule_d.gif);
background-repeat: repeat-y;
background-position: top right;
padding-right:20px;
}
#content{
position:relative;
min-height: 400px;
padding:40px 5px 5px 25px;
background-image:url(styles/skin_default/pellicule_g.gif);
background-repeat: repeat-y;
}
#footer {
text-align: center;
border-top: 1px solid #eeeeee;
margin:10px 5px 5px 5px;
padding-top:5px;
font-size:7pt;
color:#eeeeee;}
#titre{
position:absolute;
top:0px;
left:20px;
width:450px;
padding:8px 0px 5px 5px;
color:white;
font-size:15pt;
font-weight:800;
background-image: url(styles/skin_default/pellicule_cinema.png);
background-repeat: no-repeat;
border:solid 1px red;
}
#titreVO{
font-style:italic;
position:absolute;
top:5px;
right:20px;
border:solid 1px red;
}
#affiche{
float:left;
margin:10px 0px 0px 0px;
border: solid 1px black;
background-color: white;
padding:5px;
}
#fiche{
padding:5px;
margin:10px 0px 0px 170px;
border: solid 1px black;
background-image: url(styles/skin_default/images.jpg);
background-repeat: no-repeat;
background-position: top right;
background-color: #ffffff;
}
#ficheTechnique{
border: solid 1px black;
padding:5px;
margin:5px 0px 0px 5px;
background-color: #ffffff;
float:right;
}
#acteurs{
margin:5px;
margin-left:165px;
border: solid 0px black;
padding:10px;
}
#synopsis{
clear:both;
background-image: url(skin_default/movie.gif);
background-repeat: no-repeat;
background-position: bottom left;
border:solid 1px black;
padding:5px;
margin-top:5px;
background-color: white;
}
#commentaires{
border:solid 1px black;
padding:5px;
margin-top:5px;
background-color: #F5F5F5;
background-image: url(skin_default/bobine.png);
background-repeat: no-repeat;
background-position: bottom right;
}
</style>
</head>
<body>
<div id="box">
<div id='menu'>Menu</div>
<div id="contentBox">
<div id="content">
<div id='titre'>Blade runner</div>
<div id='titreVO'>Blade runner</div>
<div id='affiche'><img height="200" width="150" src="thumbs/202.jpg" title="Blade runner" alt="Blade runner" /></div>
<div id='fiche'>
<table cellpadding='0' cellspacing='3'>
<tr><td>Année</td><td>1982</td></tr>
<tr><td>genre</td><td>Fantastique</td></tr>
<tr><td>Durée</td><td>01h56</td></tr>
<tr><td>Pays</td><td>Etats-unis</td></tr>
<tr><td>Réalisateur</td><td>Ridley SCOTT</td></tr>
<tr><td>Production</td><td>Michael DEELEY - The Ladd Company</td></tr>
</table>
</div>
<div id='ficheTechnique'>
<table cellpadding='0' cellspacing='5'>
<tr><td>Format Video</td><td>-</td><td>Bitrate</td><td>-</td></tr>
<tr><td>Format Audio</td><td>-</td><td>Bitrate</td><td>-</td></tr>
<tr><td>Resolution</td><td>-</td><td>Framerate</td><td>-</td></tr>
</table>
</div>
<div id='acteurs'>Deckard - Harrison FORD<br />Roy Batty - Rutger HAUER<br />Rachel - Sean YOUNG<br />Gaff - Edward James OLMOS<br />Bryant - M Emmet WALSH</div>
<div id='synopsis'>
En 2019, Los Angeles est devenue une mégapole polluée, surpeuplée et bruyante. Deckard, un ancien policier,, un «Blade Runner» est recruté par Bryant pour traquer et éliminer un groupe de quatre "répliquants" - Batty, Pris, Leon et Zhora - créatures humaines artificielles échappées de leur espace réservé qui ont déjà tué plusieurs personnes....</div>
<div id='commentaires'>
Anecdote<br />BLADE RUNNER coûta 30 millions de dollars. Selon sa méthode habituelle, Ridley Scott créa un univers plein de détails qui ne participe pas directement à l'action du film mais contribue à son atmosphère....</div>
</div>
</div>
<div id='footer'>Footer</div>
</div>
</body>
</html>

Marsh Posté le 18-01-2005 à 15:02:43

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed

Name *

Email *

URL

Message *