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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] Marge correcte seulement sur IE

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[CSS] Marge correcte seulement sur IE

n°1751079
Scarf3ss3
Posté le 25-06-2008 à 13:05:02  profilanswer
 

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">
  4. <dl>
  5.  <dt>< img src="image/1.png" /></dt>
  6.  <dd>
  7.   <ul>
  8.   <li>1</li>
  9.   <li>2</li>
  10.   <li>3</li>
  11.   <li>4</li>
  12.   <li>5</li>
  13.   </ul>
  14.  </dd>
  15.  <dt>< img src="image/2.png" /></dt>
  16.  <dd>
  17.   <ul>
  18.   <li>1</li>
  19.   <li>2</li>
  20.   <li>3</li>
  21.   <li>4</li>
  22.   <li>5</li>
  23.   </ul>
  24.  </dd>
  25. </dl>
  26. <dl>
  27.  <dt>< img src="image/3.png" /></dt>
  28.  <dd>
  29.   <ul>
  30.   <li>1</li>
  31.   <li>2</li>
  32.   <li>3</li>
  33.   <li>4</li>
  34.   <li>5</li>
  35.   </ul>
  36.  </dd>
  37.  <dt>< img src="image/4.png" /></dt>
  38.  <dd>
  39.   <ul>
  40.   <li>1</li>
  41.   <li>2</li>
  42.   <li>3</li>
  43.   <li>4</li>
  44.   <li>5</li>
  45.   </ul>
  46.  </dd>
  47. </dl>
  48. </div>
  49. <p class="lien"><a href="1.php">Page 2 </a></p>
  50. <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. }
  14. #manco {
  15. width: 700px;
  16. display:block;
  17. clear:both;
  18. font-size:11px;
  19. }
  20. #manco dl{
  21. float:left;
  22. display:block;
  23. }
  24. #manco dl dt {
  25. float:left;
  26. display:block;
  27. width:100px;
  28. padding:3px 10px;
  29. }
  30. #manco dl dd {
  31. float:left;
  32. display:block;
  33. width:230px;
  34. padding:3px 0px;
  35. }
  36. #manco dl dd ul {
  37. display:block;
  38. width:230px;
  39. list-style:none;
  40. }
  41. #manco dl dd ul li {
  42. width:230px;
  43. margin:3px 0px;
  44. }
  45. #manco a {
  46. text-decoration:underline;
  47. }
  48. .lien {
  49. width: 668px;
  50. display:block;
  51. clear:both;
  52. text-align:right;
  53. font-weight:bold;
  54. font-size:11px;
  55. margin-left:10px;
  56. background-color:#cde6fa;
  57. padding:5px;
  58. margin-top:15px;
  59. margin-bottom:15px;
  60. border: 1px dotted #1c469d;
  61. }


 
 
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,

mood
Publicité
Posté le 25-06-2008 à 13:05:02  profilanswer
 

n°1751490
mIRROR
Chevreuillobolchévik
Posté le 26-06-2008 à 02:43:06  profilanswer
 

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

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

  [CSS] Marge correcte seulement sur IE

 

Sujets relatifs
Problème d'image background en CSS sortie d'Adobe...Popup CSS, avec désactivation de la page courante
imbrication de balise CSSFormattage du texte en CSS avec white-space
[IE]Champ de formulaire qui refuse de garder le focusPerte d'interactivité sur un bouton en lui appliquant une classe CSS
Problème de Float avec IEDiv et CSS.... : Problèmes de longueurs
Problème infobulle JS sous IEProblème d'affichage de tableau : vertical Firefox / Horizontal IE
Plus de sujets relatifs à : [CSS] Marge correcte seulement sur IE


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