[HTML/CSS] - Problème d'affichage margin-top: -10px; sous IE [RESOLU]

- Problème d'affichage margin-top: -10px; sous IE [RESOLU] [HTML/CSS] - HTML/CSS - Programmation

Marsh Posté le 19-07-2005 à 11:15:11    

Voilà, j'ai un petit problème d'affichage sur le site que je suis en train de faire ...
 
Voilà le topos :
 
j'ai une news, dans un div et dans ce div, j'utilise une balise H2 pour le titre de la news ( conseiller ici d'un point de vue semantique ) et H3 pour le pied de page.
Jusque là, tout vas bien.
 
ca donne ca :
 

Code :
  1. <div class="news">
  2. <h2>Titre news</h2>
  3.  <p>
  4.  texte de la news
  5.  </p>
  6. <h3>pied de news</h3>
  7. </div>


 
avec , niveau css :

Code :
  1. .news {
  2. font-family:Verdana, Arial, Helvetica, sans-serif;
  3. font-size: 11px;
  4. padding: 0 20px 0 20px;
  5. border: solid 1px black;
  6. border-right: solid 2px black;
  7. border-bottom: solid 2px black;
  8. background-color:#F5FDFF;
  9. margin-left: 150px;
  10. margin-right: 150px;
  11. margin-top: 15px;
  12. margin-bottom: 30px;
  13. }
  14. h2 {
  15. font-size: 0.8em;
  16. width:150px;
  17. border: solid 1px black;
  18. border-right: solid 2px black;
  19. border-bottom: solid 2px black;
  20. padding: 5px 5px 5px 5px;
  21. background-color: #ECD8EA;
  22. font-weight: bold;
  23. margin-top: -10px;
  24. text-align: center;
  25. }
  26. h3 {
  27. font-size: 9px;
  28. border: solid 1px black;
  29. border-right: solid 2px black;
  30. border-bottom: solid 2px black;
  31. padding: 5px 5px 5px 5px;
  32. background-color: #DDF5C7;
  33. margin-bottom: -10px;
  34. font-weight: normal;
  35. }


 
le probleme, c'est que les "box" H2 et H3 sont cencées être "decalées" vers le haut ou le bas de 10px ( margin-top: -10px et margin-bottom: -10px ).
 
Ca fonctionne nickel sous FF
http://step.moultiplayers.net/ff-box.png
 
mais pas sous IE  
http://step.moultiplayers.net/ie-box.png
 
est-ce possible de corriger ca ou je doit m'en contenter ??
 
merci d'avance !
 
@+
 
ma page de test : http://step.moultiplayers.net/test.php


Message édité par bl@p_psx le 19-07-2005 à 11:28:53

---------------
:Moultiplayers:.:Quatuor Chevalier:.:Admin G15-france.com:.:Wiki -G15-france:.:-Papa-:.
Reply

Marsh Posté le 19-07-2005 à 11:15:11   

Reply

Marsh Posté le 19-07-2005 à 11:17:19    

Peut-être qu'avec du positionnement relatif, cela marcherait mieux ?

Reply

Marsh Posté le 19-07-2005 à 11:20:59    

effectivement, j'y avais meme pas penser ^^
 
c'est impecable !
 
par contre, c'est normal qu'IE ne "comprenne" pas les margin negatifs ?


---------------
:Moultiplayers:.:Quatuor Chevalier:.:Admin G15-france.com:.:Wiki -G15-france:.:-Papa-:.
Reply

Marsh Posté le 19-07-2005 à 11:21:35    

Il les comprends, mais il agrandit le conteneur. Sûrement à cause du height qui se comporte comme min-height...

Reply

Marsh Posté le 19-07-2005 à 11:24:15    

autre truc bizare, si j'enleve completement les margin-top et margin-bottom de H2 et H3, c'est FF qui par en sucette ..., alors qu'en les laissant à 0 ca fonctionne
 

Code :
  1. h2 {
  2. position:relative;
  3. top:-10px;
  4. font-family:Verdana, Arial, Helvetica, sans-serif;
  5. font-size: 0.8em;
  6. width:150px;
  7. border: solid 1px black;
  8. border-right: solid 2px black;
  9. border-bottom: solid 2px black;
  10. padding: 5px 5px 5px 5px;
  11. background-color: #ECD8EA;
  12. font-weight: bold;
  13. margin-top:0;
  14. text-align: center;
  15. }
  16. h3 {
  17. position:relative;
  18. top:10px;
  19. font-family:Verdana, Arial, Helvetica, sans-serif;
  20. font-size: 9px;
  21. border: solid 1px black;
  22. border-right: solid 2px black;
  23. border-bottom: solid 2px black;
  24. padding: 5px 5px 5px 5px;
  25. background-color: #DDF5C7;
  26. margin-bottom:0;
  27. font-weight: normal;
  28. }


 
merci bien pour l'idée ! j'avais completement zapper


Message édité par bl@p_psx le 19-07-2005 à 11:25:13

---------------
:Moultiplayers:.:Quatuor Chevalier:.:Admin G15-france.com:.:Wiki -G15-france:.:-Papa-:.
Reply

Marsh Posté le 19-07-2005 à 11:26:56    

t'aurais pas une idée pour centrer le site sous IE  
( ca fonctionne en mettant un align: center dans le bosy, mais il faudrais que je reprenne tout mes autres style à cause de l'heritage ) ...
 
Si ya rien d'autre à faire, je serais bien obligé remarque ...
 
@+
 
ps: j'ai tester margin: 0 auto; ca donne rien


---------------
:Moultiplayers:.:Quatuor Chevalier:.:Admin G15-france.com:.:Wiki -G15-france:.:-Papa-:.
Reply

Marsh Posté le 19-07-2005 à 11:32:38    

Si, margin: 0 auto fonctionne. Oublie pas le DOCTYPE, et de virer la déclaration xml

Reply

Marsh Posté le 19-07-2005 à 12:44:41    

? le doctype est mis et ok ? non ? et virer la declaration xml ?
 
je t'avoue que je capte pas bien là ....
 
edit: je vient de comprendre ... je connaisais pas cette astuce ... ( virer la declaration xml )
 
merci encore ^^


Message édité par bl@p_psx le 19-07-2005 à 12:49:50

---------------
:Moultiplayers:.:Quatuor Chevalier:.:Admin G15-france.com:.:Wiki -G15-france:.:-Papa-:.
Reply

Sujets relatifs:

Leave a Replay

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