Différence entre FF et IE : Liste

Différence entre FF et IE : Liste - HTML/CSS - Programmation

Marsh Posté le 23-03-2008 à 11:57:12    

Bonjour,
 
Je suis actuellement en train de finaliser le template de mon blog sous WP et je constate une différence d'affichage entre FF et IE.
 
Classique...
 
Cependant, mon code me paraît tout à fait correct et je ne comprends pas pourquoi la sidebar s'affiche parfaitement sur FF mais présente des bugs au niveau des <h2> et des <li> sous IE.
 
Un peu d'aide serait la bienvenue !
 
--> http://egonomia.free.fr/
 
Merci d'avance,
 
J.


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

Marsh Posté le 23-03-2008 à 11:57:12   

Reply

Marsh Posté le 23-03-2008 à 12:28:53    

Code :
  1. /*
  2. Theme Name: Kwinks
  3. Theme URI: http://egonomia.free.fr/
  4. Description: Egonomia's first original theme.
  5. Version: 1.0
  6. Author: Jeremi IOGNA
  7. */
  8. body {
  9.   background:#0B0B0B;
  10.   color:#B2B2B2;
  11.   font-family:"Lucida Sans Unicode", "Trebuchet MS", "Helvetica", "Arial", sans-serif;
  12. font-size:62.5%; /* Resets 1em to 10px */
  13.   margin:0px;
  14. padding:0px;
  15. text-align:center;
  16.   }
  18. #top {
  19.   background:#FF0000;
  20.   height:5px;
  21.   margin:0px auto;
  22.   padding:0px;
  23.   width:640px;
  24. }
  26. #page {
  27.   display:table;
  28.   height:100%;
  29. margin:40px auto 0px auto;
  30. padding:0px;
  31. text-align:left;
  32. width:640px;
  33.   }
  35. #logo {
  36.   float:left;
  37.   margin:0px 0px 40px 0px;
  38.   padding:0px;
  39.   }
  41. a img {
  42.   border:none;
  43. }
  45. .menu {
  46.   color:white;
  47.   float:right;
  48.   font-family:"Lucida Sans", "Trebuchet MS", "Helvetica", "Arial", sans-serif;
  49. font-size:0.9em;
  50. font-weight:bold;
  51.   margin:18px 5px 0px 0px;
  52.   padding:0px;
  53. }
  55. a {
  56. color:white;
  57. text-decoration:none;
  58. }
  60. #search_form {
  61.   background:#121212;
  62.   border:1px solid #181818;
  63.   color:#B2B2B2;
  64.   float:right;
  65.   font-family:"Lucida Sans", "Trebuchet MS", "Helvetica", "Arial", sans-serif;
  66. font-size:0.9em;
  67. font-weight:bold;
  68. margin:12px 0px 0px 10px;
  69.   padding:5px;
  70.   text-align:right;
  71.   width:188px;
  72. }
  74. #primary {
  75. float:left;
  76. margin:0px 40px 0px 0px;
  77. padding:0px;
  78. width:400px;
  79.   }
  81. h1 {
  82.   color:white;
  83. font-size:1.2em;
  84. margin:0px;
  85. padding:0px;
  86. text-transform:uppercase;
  87.   }
  89. .post_meta {
  90. font-size:1.1em;
  91.   }
  93. .post_text {
  94.   font-size:1.1em;
  95.   line-height:1.8em;
  96.   margin:20px 0px 0px 0px;
  97.   padding:0px;
  98.   }
  100. p {
  101.   margin:10px 0px 0px 0px;
  102.   padding:0px;
  103.   }
  105. img.post_text {
  106.   margin:0px 0px 10px 0px;
  107.   padding:0px;
  108.   }
  110. .post_footer {
  111.   background:#121212;
  112.   border-top:1px solid #181818;
  113.   border-bottom:1px solid #181818;
  114.   font-size:1.1em;
  115.   margin:10px 0px 40px 0px;
  116.   padding:5px;
  117.   }
  119. .post_footer a {
  120.   color:#B2B2B2;
  121.   }
  123. #up_nav {
  124.   margin:0px 0px 20px 0px;
  125.   padding:0px;
  126. }
  128. h3#comments {
  129.   color:#FF0000;
  130.   font-size:1.1em;
  131.   margin:20px 0px 20px 0px;
  132.   padding:0px;
  133.   text-transform:uppercase;
  134. }
  136. ol.commentlist {
  137.   list-style:none;
  138.   margin:0px;
  139.   padding:0px;
  140. }
  142. .commentlist li {
  143.   font-size:1em;
  144.   line-height:1.6em;
  145.   list-style:none;
  146.   margin:0px 0px 10px 0px;
  147.   padding:0px 0px 10px 0px;
  148. }
  150. h3#respond {
  151.   background:#121212;
  152.   border-top:1px solid #181818;
  153.   border-bottom:1px solid #181818;
  154.   color:white;
  155.   font-size:1.1em;
  156.   font-weight:normal;
  157.   margin:20px 0px 20px 0px;
  158.   padding:5px;
  159. }
  161. .comment_input {
  162.   margin:0px 0px 10px 0px;
  163. }
  165. input {
  166.   background:#121212;
  167.   border:1px solid #181818;
  168.   color:#B2B2B2;
  169.   font-family:"Lucida Sans", "Trebuchet MS", "Helvetica", "Arial", sans-serif;
  170. font-size:0.9em;
  171. font-weight:bold;
  172.   margin:0px;
  173.   padding:5px;
  174.   width:188px;
  175. }
  177. .label {
  178.   font-family:"Lucida Sans", "Trebuchet MS", "Helvetica", "Arial", sans-serif;
  179. font-size:0.9em;
  180. font-weight:bold;
  181.   margin:0px 0px 0px 10px;
  182.   padding:0px;
  183. }
  185. textarea#comment {
  186.   background:#121212;
  187.   border:1px solid #181818;
  188.   color:#B2B2B2;
  189.   font-family:"Lucida Sans", "Trebuchet MS", "Helvetica", "Arial", sans-serif;
  190. font-size:0.9em;
  191. font-weight:bold;
  192.   margin:10px 0px 0px 0px;
  193.   padding:5px;
  194.   width:388px;
  195. }
  197. input#submit {
  198.   color:white;
  199.   font-size:1.1em;
  200.   font-weight:normal;
  201.   margin:10px 0px 0px 0px;
  202.   padding:5px;
  203.   width:400px;
  204. }
  206. #down_nav a {
  207.   color:#B2B2B2;
  208.   font-size:1.1em;
  209. }
  211. #sidebar {
  212.   float:right;
  213.   margin:0px;
  214. padding:0px;
  215. text-align:left;
  216.   width:200px;
  217.   }
  219. h2 {
  220.   background:#121212;
  221.   border-top:1px solid #181818;
  222.   border-bottom:1px solid #181818;
  223.   color:white;
  224. font-size:1em;
  225. margin:0px;
  226. padding:5px 5px 5px 10px;
  227. text-transform:uppercase;
  228.   }
  230. ul {
  231.   margin:0px 0px 20px 0px;
  232.   padding:0px;
  233.   }
  235. li {
  236.   border-bottom:1px solid #181818;
  237. font-size:1em;
  238. list-style:url(http://egonomia.free.fr/wp-content/themes/Kwinks/images/sidebar_bullet.jpg) inside;
  239.   margin:0px;
  240.   padding:3px 0px 3px 10px;
  241.   }
  243. #who {
  244.   border:none;
  245.   font-size:1em;
  246.   line-height:1.6em;
  247.   list-style:none;
  248.   padding:10px 10px 0px 10px;
  249. }
  251. #syndication_margin {
  252.   margin:0px 0px 5px 0px;
  253. }
  255. #syndication {
  256.   border:none;
  257.   font-size:1em;
  258.   list-style:none;
  259.   padding:5px 10px 0px 10px;
  260. }
  262. #recent-comments {
  263.   border:none;
  264.   list-style:none;
  265.   margin:0px;
  266.   padding:0px;
  267. }
  269. h2.widgettitle {
  270.   list-style:none;
  271. }
  273. .recentcomments {
  274.   list-style:none;
  275. }
  277. #categories-1 {
  278.   border:none;
  279.   list-style:none;
  280.   margin:0px;
  281.   padding:0px;
  282. }
  284. #archives {
  285.   border:none;
  286.   list-style:none;
  287.   margin:0px;
  288.   padding:0px;
  289. }
  291. #links {
  292.   border:none;
  293.   list-style:none;
  294.   margin:0px;
  295.   padding:0px;
  296. }
  298. .spacer {
  299.   clear:both;
  300.   }
  302. #footer {
  303.   border-top:1px solid #181818;
  304.   margin:40px 0px 20px 0px;
  305.   padding:20px 0px 0px 0px;
  306.   text-align:center;
  307. }


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

Marsh Posté le 24-03-2008 à 10:04:15    

Re,
 
Après avoir refarfouillé dans mon code (et optimisé la partie sidebar qui était assez peu élégante niveau code), j'ai quasiment résolu le problème.
 
Il reste un tout petit soucis cependant. Sous IE, le titre des blocs contenant des widgets est décalé vers la droite au lieu d'être correctement aligné comme sous FF.
 

Code :
  1. #sidebar {
  2.   float:right;
  3.   margin:0px;
  4. padding:0px;
  5. text-align:left;
  6.   width:200px;
  7.   }
  9. #sidebar h2 {
  10.   background:#121212;
  11.   border-top:1px solid #181818;
  12.   border-bottom:1px solid #181818;
  13.   color:white;
  14. font-size:1em;
  15. margin:0px;
  16. padding:5px 5px 5px 10px;
  17. text-transform:uppercase;
  18.   }
  20. #sidebar ul {
  21.   margin:0px 0px 20px 0px;
  22.   padding:0px;
  23.   }
  25. #sidebar li {
  26.   list-style:none;
  27. }
  29. #who {
  30.   background:none;
  31.   border:none;
  32.   font-size:1em;
  33.   line-height:1.6em;
  34.   padding:10px 10px 0px 10px;
  35. }
  37. #syndication_top {
  38.   background:none;
  39.   border:none;
  40.   font-size:1em;
  41.   margin:5px 0px 0px 0px;
  42.   padding:5px 10px 0px 10px;
  43. }
  45. #syndication {
  46.   background:none;
  47.   border:none;
  48.   font-size:1em;
  49.   padding:5px 10px 0px 10px;
  50. }
  52. .widget ul li {
  53.   border-bottom:1px solid #181818;
  54. font-size:1em;
  55. list-style-type:none;
  56.   background:transparent url(http://egonomia.free.fr/wp-content/themes/Kwinks/images/sidebar_bullet.jpg) top left no-repeat;
  57.   margin:0px;
  58.   padding:3px 0px 3px 27px;
  59. }
  61. #recent-comments ul li {
  62.   list-style:none;
  63.   padding:3px 0px 3px 10px;
  64. }


 
Des idées ?
 
Merci !
 
PS : Pour mémoire, ça se passe ici --> http://egonomia.free.fr/


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

Sujets relatifs:

Leave a Replay

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