[CSS] Marge correcte seulement sur IE

Marge correcte seulement sur IE [CSS] - HTML/CSS - Programmation

Marsh Posté le 25-06-2008 à 13:05:02    

Bonjour à tous,
 
De manière étonnante c'est IE 6 et IE 7 qui affiche exactement ce que je veux et pas firefox, safari ou opera ce qui me laisse àpenser qu'il y a une erreur quelque part dans mes CSS
 
J'ai une marge entre 2 blocks qui ne veut pas s'afficher sur ces navigateurs voici le code html épuré.
 

Code :
  1. <h2>Titre 1</h2>
  2. <img src="image/1.png" />
  3. <div id="manco">
  5. <dl>
  6.  <dt>< img src="image/1.png" /></dt>
  7.  <dd>
  8.   <ul>
  9.   <li>1</li>
  10.   <li>2</li>
  11.   <li>3</li>
  12.   <li>4</li>
  13.   <li>5</li>
  14.   </ul>
  15.  </dd>
  16.  <dt>< img src="image/2.png" /></dt>
  17.  <dd>
  18.   <ul>
  19.   <li>1</li>
  20.   <li>2</li>
  21.   <li>3</li>
  22.   <li>4</li>
  23.   <li>5</li>
  24.   </ul>
  25.  </dd>
  26. </dl>
  28. <dl>
  29.  <dt>< img src="image/3.png" /></dt>
  30.  <dd>
  31.   <ul>
  32.   <li>1</li>
  33.   <li>2</li>
  34.   <li>3</li>
  35.   <li>4</li>
  36.   <li>5</li>
  37.   </ul>
  38.  </dd>
  39.  <dt>< img src="image/4.png" /></dt>
  40.  <dd>
  41.   <ul>
  42.   <li>1</li>
  43.   <li>2</li>
  44.   <li>3</li>
  45.   <li>4</li>
  46.   <li>5</li>
  47.   </ul>
  48.  </dd>
  49. </dl>
  51. </div>
  52. <p class="lien"><a href="1.php">Page 2 </a></p>
  53. <h2>Titre 2</h2>


 
 
Et voici le code css pour ce balisage.

Code :
  1. h2 {
  2. font-size:12px;color: #FFFFFF;
  3. height:19px;
  4. padding-top:5px;
  5. background-color:#a3a3a3;
  6. border-top:1px solid #525252;
  7. width:656px;
  8. display:block;
  9. float:left;
  10. text-indent:5px;
  11. border-bottom:1px solid #525252;
  12. margin-bottom:10px;
  13. }
  16. #manco {
  17. width: 700px;
  18. display:block;
  19. clear:both;
  20. font-size:11px;
  21. }
  22. #manco dl{
  23. float:left;
  24. display:block;
  25. }
  26. #manco dl dt {
  27. float:left;
  28. display:block;
  29. width:100px;
  30. padding:3px 10px;
  31. }
  32. #manco dl dd {
  33. float:left;
  34. display:block;
  35. width:230px;
  36. padding:3px 0px;
  37. }
  38. #manco dl dd ul {
  39. display:block;
  40. width:230px;
  41. list-style:none;
  42. }
  43. #manco dl dd ul li {
  44. width:230px;
  45. margin:3px 0px;
  46. }
  47. #manco a {
  48. text-decoration:underline;
  49. }
  52. .lien {
  53. width: 668px;
  54. display:block;
  55. clear:both;
  56. text-align:right;
  57. font-weight:bold;
  58. font-size:11px;
  59. margin-left:10px;
  60. background-color:#cde6fa;
  61. padding:5px;
  62. margin-top:15px;
  63. margin-bottom:15px;
  64. border: 1px dotted #1c469d;
  65. }


 
 
La marge entre ma div "manco"  et mon <p> "lien" de 15px s'affiche bien sous IE et pas sur les autres navigateurs.
Une bonne ame pourrait elle éventuellement m'éclairer car je suis un peu perdu.
 
Merci d'avance,

Reply

Marsh Posté le 25-06-2008 à 13:05:02   

Reply

Marsh Posté le 26-06-2008 à 02:43:06    

c est parce que tes dl flottent dans ton div
donc sa hauteur est a zero et du coup le margin top de ton p ne veut plus rien dire
il faut donc replacer les elements flottants dans le flux normal en appliquant un contexte de formatage a leur conteneur
ca fait
overflow:hidden;_overflow:visible;zoom:1; dans ton #manco
(le premier pour gecko et les deux autres pour eviter de mauvaises cascades sur ie)


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Sujets relatifs:

Leave a Replay

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