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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1153446
bl@p_psx
Admin G15-france
Posté le 19-07-2005 à 11:15:11  profilanswer
 

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-:.
mood
Publicité
Posté le 19-07-2005 à 11:15:11  profilanswer
 

n°1153452
FlorentG
Unité de Masse
Posté le 19-07-2005 à 11:17:19  profilanswer
 

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

n°1153458
bl@p_psx
Admin G15-france
Posté le 19-07-2005 à 11:20:59  profilanswer
 

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-:.
n°1153459
FlorentG
Unité de Masse
Posté le 19-07-2005 à 11:21:35  profilanswer
 

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

n°1153463
bl@p_psx
Admin G15-france
Posté le 19-07-2005 à 11:24:15  profilanswer
 

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-:.
n°1153468
bl@p_psx
Admin G15-france
Posté le 19-07-2005 à 11:26:56  profilanswer
 

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-:.
n°1153478
FlorentG
Unité de Masse
Posté le 19-07-2005 à 11:32:38  profilanswer
 

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

n°1153571
bl@p_psx
Admin G15-france
Posté le 19-07-2005 à 12:44:41  profilanswer
 

? 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-:.

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

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

 

Sujets relatifs
empecher un retour à la ligne après un <a> [Resolu][RESOLU]document.getElementById().innerHTML = <table>
[Résolu] Vbs+excel :([VBA] probleme de condition
[RESOLU]affichage bonne identifiant dans tableauprobleme de parser!
probleme de privilége avec PHPMyAdminProbleme dans requete sql
[Résolu] contenu de textbox 
Plus de sujets relatifs à : [HTML/CSS] - Problème d'affichage margin-top: -10px; sous IE [RESOLU]

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

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