3 pixels jog et autres joyeusetés

3 pixels jog et autres joyeusetés - HTML/CSS - Programmation

Marsh Posté le 31-10-2008 à 16:19:54    

Bonjour !
 
Je suis en pleine phase de debugging IE et évidemment, tout ne se passe pas comme prévu...
 
En premier lieu, un petit lien vers le site en question : http://www.jironimo.com/leadbay/le [...] test.html.
 
1. A priori, je rencontre le bug du 3 pixels jog sur les deux premiers blocs en bas à droite.
Idéalement, les champs du 2ème bloc sont calés à 28 pixels de hauteur sur les lignes du 1er bloc... Ce n'est pas le cas ici : à 3 pixels près. Comment faire ?
 
2. Plus gênant : le 3ème bloc est décalé de 35 pixels vers la droite soit l'exact espacement en largeur de tous mes blocs... Impossible de trouver la faille.
 
Un petit coup de pouce ?
 
Voici le CSS incriminé :
 

Code :
  1. html, body {
  2. background-color:#0054A6;
  3. background-image:url(http://www.jironimo.com/leadbay/bg_site.jpg);
  4. background-repeat:repeat-x;
  5. margin:0px;
  6. padding:0px;
  7. text-align:center;
  8. }
  10. a {
  11. color:#7E7E7E;
  12. text-decoration:none;
  13. }
  15. img {
  16. border:none;
  17. }
  19. #page {
  20. background-image:url(http://www.jironimo.com/leadbay/bg_page.png);
  21. color:#7E7E7E;
  22. font-family:"Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
  23. font-size:62.5%; /* Resets 1em to 10px */
  24. margin:0px auto;
  25. padding:39px 60px 35px 60px;
  26. width:700px;
  27. }
  29. #logo {
  30. float:left;
  31. height:52px;
  32. margin:0px 0px 39px 0px;
  33. width:220px;
  34. }
  36. #slogan {
  37. float:left;
  38. height:32px;
  39. margin:11px 0px 0px 20px;
  40. width:154px;
  41. }
  43. #telephone {
  44. float:right;
  45. height:31px;
  46. margin:12px 0px 0px 0px;
  47. width:189px;
  48. }
  50. #header {
  51. float:left;
  52. height:300px;
  53. margin:0px 0px 35px 0px;
  54. width:700px;
  55. }
  57. #bloc_1 {
  58. background-color:#F4F4F4;
  59. background-image:url(http://www.jironimo.com/leadbay/bloc_1_titre.jpg);
  60. background-repeat:no-repeat;
  61. color:#7C7C7C;
  62. float:left;
  63. font-size:1.1em;
  64. height:162px;
  65. line-height:1.3em;
  66. margin:0px 35px 35px 0px;
  67. padding:33px 15px 15px 15px;
  68. text-align:left;
  69. width:180px;
  70. }
  72. #bloc_2 {
  73. background-color:#F4F4F4;
  74. background-image:url(http://www.jironimo.com/leadbay/bloc_2_titre.jpg);
  75. background-repeat:no-repeat;
  76. color:#7C7C7C;
  77. float:left;
  78. font-size:1.1em;
  79. height:162px;
  80. line-height:1.3em;
  81. margin:0px 0px 35px 0px;
  82. padding:33px 15px 15px 15px;
  83. text-align:left;
  84. width:180px;
  85. }
  87. #bloc_3 {
  88. background-color:#F4F4F4;
  89. background-image:url(http://www.jironimo.com/leadbay/bloc_3_titre.jpg);
  90. background-repeat:no-repeat;
  91. color:#7C7C7C;
  92. float:left;
  93. font-size:1.1em;
  94. height:162px;
  95. line-height:1.3em;
  96. margin:0px 0px 35px 35px;
  97. padding:33px 15px 15px 15px;
  98. text-align:left;
  99. width:180px;
  100. }
  102. .plus {
  103. background-image:url(http://www.jironimo.com/leadbay/bouton_en_savoir_plus.jpg);
  104. background-position:bottom center;
  105. background-repeat:no-repeat;
  106. float:left;
  107. height:177px;
  108. width:180px;
  109. }
  111. #footer {
  112. border-bottom:1px solid #DBDBDB;
  113. float:left;
  114. height:232px;
  115. padding:0px 0px 35px 0px;
  116. width:700px;
  117. }
  119. #ID {
  120. color:#7C7C7C;
  121. float:left;
  122. font-size:1em;
  123. height:232px;
  124. line-height:1.2em;
  125. margin:0px 35px 0px 0px;
  126. text-align:left;
  127. width:210px;
  128. }
  130. ul {
  131. height:204px;
  132. line-height:28px;
  133. list-style:none;
  134. margin:0px;
  135. padding:0px;
  136. }
  138. li {
  139. border-bottom:1px solid #DBDBDB;
  140. height:28px;
  141. }
  143. .entry {
  144. display:block;
  145. float:left;
  146. width:80px;
  147. }
  149. .information {
  150. display:block;
  151. float:left;
  152. width:130px;
  153. }
  155. #contact_information {
  156. float:left;
  157. height:232px;
  158. text-align:left;
  159. width:210px;
  160. }
  162. label {
  163. height:28px;
  164. line-height:28px;
  165. }
  167. .champs {
  168. background-color:#DBDBDB;
  169. border-style:none;
  170. color:#9D9FA2;
  171. height:24px;
  172. padding:6px 6px 0px 6px;
  173. width:198px;
  174. }
  176. #contact_message {
  177. float:left;
  178. height:232px;
  179. margin:0px 0px 0px 35px;
  180. text-align:left;
  181. width:210px;
  182. }
  184. .champs_message {
  185. background-color:#DBDBDB;
  186. border-style:none;
  187. color:#9D9FA2;
  188. font-family:"Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
  189. font-size:13px;
  190. height:168px;
  191. margin:0px;
  192. overflow:hidden;
  193. padding:6px 6px 0px 6px;
  194. width:198px;
  195. }
  197. #bouton {
  198. float:right;
  199. margin:21px -1px 0px 0px;
  200. }
  202. .clear {
  203. clear:both;
  204. height:0px;
  205. }
  207. #disclaimer {
  208. color:#9D9FA2;
  209. font-size:1em;
  210. line-height:1.1em;
  211. margin:35px 0px 0px 0px;
  212. text-align:left;
  213. }


 
Merci d'avance !
 
PS : Si vous voyez d'autres soucis, avez un avis à formuler concernant le code ou le design de la chose, n'hésitez surtout pas ! Je prends tout !


---------------
Kwinks up your day with Egonomia (Mon Blog) --> http://egonomia.free.fr/
Reply

Marsh Posté le 31-10-2008 à 16:19:54   

Reply

Sujets relatifs:

Leave a Replay

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