Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2892 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  PB de positionnement css avec IE

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

PB de positionnement css avec IE

n°955485
drlobo
Posté le 18-01-2005 à 15:02:43  profilanswer
 

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)
 
http://img66.exs.cx/img66/9923/ok8ky.png
http://img137.exs.cx/img137/876/okimg8ey.th.png
 
Mauvais affichage (IE)
 
http://img84.exs.cx/img84/8647/notok1iz.png
http://img113.exs.cx/img113/8840/notokimg0rm.th.png
 
 
le code html+css de la page
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  
  2.    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html>
  4. <head>
  5. <title>test page</title>
  6. <style type="text/css">
  8. a:link,a:visited, a:active { color: #131C6C; text-decoration: none; }
  9. a:hover {color: black; background-color: #eeeeee;text-decoration: underline; }
  11. body{background-color: #A0A0A0; }
  13. img{border:0px; vertical-align:center;}
  15. #box{
  16. width:800px;
  17. margin:auto;
  18. font-family: Arial, Verdana, Helvetica, Sans-Serif;
  19. font-size: 8pt;
  20. }
  22. #menu{
  23. padding:10px;
  24. margin:5px 0px 5px 0px;
  25. background-color: #eeeeee;
  26. font-size:10pt;
  27. font-weight:800;
  28. text-align:center;
  29. border:dashed 2px #A5A5A5;
  30. }
  32. #contentBox{
  33. background-color: #eeeeee;
  34. background-image:url(styles/skin_default/pellicule_d.gif);
  35. background-repeat: repeat-y;
  36. background-position: top right;
  37. padding-right:20px;
  39. }
  40. #content{
  41. position:relative;
  42. min-height: 400px;
  43. padding:40px 5px 5px 25px;
  44. background-image:url(styles/skin_default/pellicule_g.gif);
  45. background-repeat: repeat-y;
  46. }
  48. #footer {
  49. text-align: center;
  50. border-top: 1px solid #eeeeee;
  51. margin:10px 5px 5px 5px;
  52. padding-top:5px;
  53. font-size:7pt;
  54. color:#eeeeee;}
  57. #titre{
  58. position:absolute;
  59. top:0px;
  60. left:20px;
  61. width:450px;
  62. padding:8px 0px 5px 5px;
  63. color:white;
  64. font-size:15pt;
  65. font-weight:800;
  66. background-image: url(styles/skin_default/pellicule_cinema.png);
  67. background-repeat: no-repeat;
  68. border:solid 1px red;
  69. }
  71. #titreVO{
  72. font-style:italic;
  73. position:absolute;
  74. top:5px;
  75. right:20px;
  76. border:solid 1px red;
  77. }
  79. #affiche{
  80. float:left;
  81. margin:10px 0px 0px 0px;
  82. border: solid 1px black;
  83. background-color: white;
  84. padding:5px;
  85. }
  87. #fiche{
  88. padding:5px;
  89. margin:10px 0px 0px 170px;
  90. border: solid 1px black;
  91. background-image: url(styles/skin_default/images.jpg);
  92. background-repeat: no-repeat;
  93. background-position: top right;
  94. background-color: #ffffff;
  95. }
  97. #ficheTechnique{
  98. border: solid 1px black;
  99. padding:5px;
  100. margin:5px 0px 0px 5px;
  101. background-color: #ffffff;
  102. float:right;
  103. }
  105. #acteurs{
  106. margin:5px;
  107. margin-left:165px;
  108. border: solid 0px black;
  109. padding:10px;
  110. }
  112. #synopsis{
  113. clear:both;
  114. background-image: url(skin_default/movie.gif);
  115. background-repeat: no-repeat;
  116. background-position: bottom left;
  117. border:solid 1px black;
  118. padding:5px;
  119. margin-top:5px;
  120. background-color: white;
  121. }
  122. #commentaires{
  123. border:solid 1px black;
  124. padding:5px;
  125. margin-top:5px;
  126. background-color: #F5F5F5;
  127. background-image: url(skin_default/bobine.png);
  128. background-repeat: no-repeat;
  129. background-position: bottom right;
  130. }
  131. </style>
  132. </head>
  133. <body>
  134. <div id="box">
  136. <div id='menu'>Menu</div>
  138. <div id="contentBox">
  139.  <div id="content">
  141.   <div id='titre'>Blade runner</div>
  143.   <div id='titreVO'>Blade runner</div>
  144. <div id='affiche'><img height="200" width="150" src="thumbs/202.jpg" title="Blade runner" alt="Blade runner" /></div>
  147.   <div id='fiche'>
  148.   <table cellpadding='0' cellspacing='3'>
  149.    <tr><td>Année</td><td>1982</td></tr>
  150.    <tr><td>genre</td><td>Fantastique</td></tr>
  151.    <tr><td>Durée</td><td>01h56</td></tr>
  152.    <tr><td>Pays</td><td>Etats-unis</td></tr>
  153.    <tr><td>Réalisateur</td><td>Ridley SCOTT</td></tr>
  154.    <tr><td>Production</td><td>Michael DEELEY - The Ladd Company</td></tr>
  155.   </table>
  156.   </div>
  158.   <div id='ficheTechnique'>
  159.   <table cellpadding='0' cellspacing='5'>
  160.    <tr><td>Format Video</td><td>-</td><td>Bitrate</td><td>-</td></tr>
  161.    <tr><td>Format Audio</td><td>-</td><td>Bitrate</td><td>-</td></tr>
  162.    <tr><td>Resolution</td><td>-</td><td>Framerate</td><td>-</td></tr>
  163.   </table>
  164.   </div>
  166.   <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>
  168.   <div id='synopsis'>
  169.   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>
  171.   <div id='commentaires'>
  172.   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>
  173.  </div>
  174. </div>
  176. <div id='footer'>Footer</div>
  177. </div>
  178. </body>
  179. </html>

mood
Publicité
Posté le 18-01-2005 à 15:02:43  profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  PB de positionnement css avec IE

 

Sujets relatifs
[CSS] Positionnement flottant, hauteur du conteneurproblème de positionnement du texte avec Firefox
[JTextArea] Forcer le positionnement dans une JScrollPane[css] Problème de positionnement
Positionnement des calques...[CSS] Problème de positionnement
Petit probleme de positionnement[CSS] Positionnement bloc
[GTK+] Positionnement des Widgets ...[CSS]Positionnement image.
Plus de sujets relatifs à : PB de positionnement css avec IE

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.071 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR