Votre question

[IE6] Besoin d'un Debug CSS

Tags :
  • CSS
  • Programmation
Dernière réponse : dans Programmation
2 Septembre 2007 13:37:44

Bonjour a vous, j'aurais besoin d'un petit debug css sous IE6 car j'arrive vraiement pas a debugger le mien actuellement

http://www.satovo.net


Regardez sous FF2, sous IE7 tout est beau
et passez sous... ie6 et voila la désastre :S

Si quelqu'un pouvait m'aider a le debugger ce sera génial :) 

Ci dessous, index.html et style.css

index.html

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <link href="style.css" rel="stylesheet" type="text/css" media="screen, handheld" />
  6. <title>Satovo.net - Accueil, Bienvenue sur ma page perso</title>
  7. </head/>
  8. <body>
  9.  
  10. <div id="banniere"></div>
  11. <div id="speedbarre">
  12. <p><a href="#">Accueil</a> - <a href="#">Blog</a> - <a href="#">Galerie</a> - <a href="#">Services</a> - <a href="#">Annuaire</a> - <a href="#">Contact</a></p>
  13. </div>
  14. <div id="debut_contenu"></div>
  15. <div id="contenu">
  16. <h3>Bienvenue</h3>
  17. <p>Lorem ipsum lorem definitiones eam ad. Vel cu iudico sanctus, ei solet copiosae est. In ipsum utinam postea has, cum at brute voluptua, ei eum sint harum scaevola. Quodsi tritani ut vel. Timeam suscipit te usu, mei saepe eloquentiam an.
  18. <br/>
  19. Usu ullum legimus id, animal mnesarchum ea mel, at porro altera verear nam. Ius atqui dolore possim at. Ut qui viris choro qualisque. Ex nam dictas accusata, ea dicta lobortis per. Augue oportere conceptam ei nec. Scripta postulant id ius, discere constituto has eu, illud denique in sit. Id cibo meis usu.
  20. </p>
  21.  
  22. <p>Lorem ipsum lorem definitiones eam ad. Vel cu iudico sanctus, ei solet copiosae est. In ipsum utinam postea has, cum at brute voluptua, ei eum sint harum scaevola. Quodsi tritani ut vel. Timeam suscipit te usu, mei saepe eloquentiam an.
  23. <br/>
  24. Usu ullum legimus id, animal mnesarchum ea mel, at porro altera verear nam. Ius atqui dolore possim at. Ut qui viris choro qualisque. Ex nam dictas accusata, ea dicta lobortis per. Augue oportere conceptam ei nec. Scripta postulant id ius, discere constituto has eu, illud denique in sit. Id cibo meis usu.
  25. </p>
  26.  
  27. <p>Lorem ipsum lorem definitiones eam ad. Vel cu iudico sanctus, ei solet copiosae est. In ipsum utinam postea has, cum at brute voluptua, ei eum sint harum scaevola. Quodsi tritani ut vel. Timeam suscipit te usu, mei saepe eloquentiam an.
  28. <br/>
  29. Usu ullum legimus id, animal mnesarchum ea mel, at porro altera verear nam. Ius atqui dolore possim at. Ut qui viris choro qualisque. Ex nam dictas accusata, ea dicta lobortis per. Augue oportere conceptam ei nec. Scripta postulant id ius, discere constituto has eu, illud denique in sit. Id cibo meis usu.
  30. </p>
  31. </div>
  32. <div id="fin_contenu"></div>
  33. <div id="debut_menu_droite"></div>
  34. <div id="menu_droite">
  35. <h4>Catégorie :</h4>
  36. <ul>
  37. <li><a href="#">Liens Fictif</a></li>
  38. <li><a href="#">Liens Fictif</a></li>
  39. <li><a href="#">Liens Fictif</a></li>
  40. <li><a href="#">Liens Fictif</a></li>
  41. </ul><br/>
  42. <h4>Catégorie :</h4>
  43. <ul>
  44. <li><a href="#">Liens Fictif</a></li>
  45. <li><a href="#">Liens Fictif</a></li>
  46. <li><a href="#">Liens Fictif</a></li>
  47. <li><a href="#">Liens Fictif</a></li>
  48. </ul>
  49. </div>
  50. <div id="fin_menu_droite"></div>
  51.  
  52.  
  53.  
  54. </body>
  55. </html>


Style.css
  1. body {
  2. width: 900px;
  3. margin: auto;
  4. background: #d3ebfd url("images/fond.jpg") repeat-x;
  5. }
  6. #banniere {
  7. width: 898px;
  8. height: 113px;
  9. background: url("images/banniere.jpg");
  10. }
  11. #speedbarre {
  12. width: 323px;
  13. display: inline;
  14. height: 22px;
  15. margin-left: 278px;
  16. background: url("images/speedbarre.jpg");
  17. padding-right: 10px;
  18. float: left;
  19. }
  20. #contenu {
  21. display: inline;
  22. width: 325px;
  23. margin-left: 278px;
  24. background: url("images/contenu.png");
  25. padding-left: 8px;
  26. padding-bottom: 10px;
  27. float: left;
  28. clear:left;
  29. margin-top:0px;
  30. }
  31. #debut_contenu {
  32. display: inline;
  33. width: 333px;
  34. margin-left: 278px;
  35. height: 15px;
  36. background: url("images/debut_contenu.png");
  37. float: left;
  38. margin-bottom:0;
  39. clear:left;
  40. }
  41. #fin_contenu {
  42. display: block;
  43. width: 333px;
  44. margin-left: 278px;
  45. height: 15px;
  46. background: url("images/fin_contenu.png") no-repeat;
  47. float: left;
  48. clear: both;
  49. }
  50. #debut_menu_droite {
  51. width: 130px;
  52. height: 12px;
  53. margin: 0;
  54. margin-left: 611px;
  55. margin-top: 60px;
  56. background: url("images/debut_menu.png") no-repeat;
  57. }
  58. #menu_droite {
  59. width: 130px;
  60. margin: 0px;
  61. margin-left: 611px;
  62. background: url("images/menu.png");
  63. }
  64. #fin_menu_droite {
  65. width: 130px;
  66. height: 15px;
  67. margin-left: 611px;
  68. background: url("images/fin_menu.png") no-repeat;
  69. }
  70. #speedbarre a, p {
  71. margin:0;
  72. text-align: center;
  73. color: #5ab0e2;
  74. text-decoration: none;
  75. font-size: 8pt;
  76. font-family: Arial;
  77. }
  78. #speedbarre a:hover {
  79. margin:0;
  80. text-align: center;
  81. color: #7bc9f6;
  82. text-decoration: underline;
  83. font-size: 8pt;
  84. font-family: Arial;
  85. }
  86. h3 {
  87. margin: 0;
  88. margin-right: 10px;
  89. text-align: right;
  90. font-family: Arial;
  91. font-size: 10pt;
  92. color: #3b4347;
  93. border-right: 1px solid #3b4347;
  94. border-bottom: 1px solid #3b4347;
  95. padding-right: 10px;
  96. padding-bottom: 1px;
  97. }
  98. h3:first-letter{
  99. color: #3c8349;
  100. font-weight: bolder;
  101. font-size:12pt;
  102. margin-top: 0;
  103. }
  104. #contenu p {
  105. color: #3b4347;
  106. font-family: arial;
  107. font-size: 8pt;
  108. text-align: justify;
  109. margin-top: 10px;
  110. margin-right: 8px;
  111. }
  112. #menu_droite h4, ul, li {
  113. margin-top: 0;
  114. margin-bottom: 0;
  115. list-style-image: url("images/puce.png");
  116. }
  117. #menu_droite h4 {
  118. margin-left: 5px;
  119. margin-bottom: 10px;
  120. font-family: Arial;
  121. font-size: 9pt;
  122. color: #535954;
  123. }
  124. #menu_droite a {
  125. color:#3c8349 ;
  126. font-family: arial;
  127. font-size: 8pt;
  128. text-decoration: none;
  129. }
  130. #menu_droite a:hover {
  131. color:#77ac81 ;
  132. font-family: arial;
  133. font-size: 8pt;
  134. text-decoration: underline;
  135. margin-left: 2px;
  136. }


Merci de m'aider :)  pour toute précision: ******@hotmail.fr

Cordialement satovo35

Autres pages sur : ie6 besoin debug css

a c 232 L Programmation
3 Septembre 2007 11:59:55

N'ayant pas IE6, tu pourrais faire des screenshots de ce que ça donne, pour essayer de se faire une idée de ce que ça pourrait donner ?!
3 Septembre 2007 12:07:52

ok pas de probleme
Tu peux avoir IE6 et IE7 en meme temps via Multiple ie un très bon logiciel ^^ pour voir les bug ie6 et ie7
http://www.satovo.net/Sans.JPG
pour l'image :) 
Contenus similaires
Anonyme
3 Septembre 2007 12:33:36

Essaye d'attribuer toutes les valeurs de marge et de padding, je pense que ca peut venir de ça.
3 Septembre 2007 13:02:01

Hein ? je ne conprend pas ce que tu veux dire...
Anonyme
3 Septembre 2007 13:36:11

Et bien verifie que toutes les valeurs des attributs margin et padding sont bien mis a zero dans tous tes styles.
a c 232 L Programmation
3 Septembre 2007 14:05:15

Ton problème, c'est les espaces entre ton menu et le reste du site ?

Ce qu'il faudrait faire, faudrait faire, en CSS :
* { margin:0; padding: 0; }

Ensuite, régler tes problèmes que ça a pu engendrer, mais ça te permettra de les régler plus facilement normalement.
3 Septembre 2007 14:08:25

Ok je vais essayer :) 
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS