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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Différence entre FF et IE : Liste

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Différence entre FF et IE : Liste

n°1706743
Forgaria
Posté le 23-03-2008 à 11:57:12  profilanswer
 

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/
mood
Publicité
Posté le 23-03-2008 à 11:57:12  profilanswer
 

n°1706753
Forgaria
Posté le 23-03-2008 à 12:28:53  profilanswer
 

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.   }
  17. #top {
  18.   background:#FF0000;
  19.   height:5px;
  20.   margin:0px auto;
  21.   padding:0px;
  22.   width:640px;
  23. }
  24. #page {
  25.   display:table;
  26.   height:100%;
  27. margin:40px auto 0px auto;
  28. padding:0px;
  29. text-align:left;
  30. width:640px;
  31.   }
  32. #logo {
  33.   float:left;
  34.   margin:0px 0px 40px 0px;
  35.   padding:0px;
  36.   }
  37. a img {
  38.   border:none;
  39. }
  40. .menu {
  41.   color:white;
  42.   float:right;
  43.   font-family:"Lucida Sans", "Trebuchet MS", "Helvetica", "Arial", sans-serif;
  44. font-size:0.9em;
  45. font-weight:bold;
  46.   margin:18px 5px 0px 0px;
  47.   padding:0px;
  48. }
  49. a {
  50. color:white;
  51. text-decoration:none;
  52. }
  53. #search_form {
  54.   background:#121212;
  55.   border:1px solid #181818;
  56.   color:#B2B2B2;
  57.   float:right;
  58.   font-family:"Lucida Sans", "Trebuchet MS", "Helvetica", "Arial", sans-serif;
  59. font-size:0.9em;
  60. font-weight:bold;
  61. margin:12px 0px 0px 10px;
  62.   padding:5px;
  63.   text-align:right;
  64.   width:188px;
  65. }
  66. #primary {
  67. float:left;
  68. margin:0px 40px 0px 0px;
  69. padding:0px;
  70. width:400px;
  71.   }
  72. h1 {
  73.   color:white;
  74. font-size:1.2em;
  75. margin:0px;
  76. padding:0px;
  77. text-transform:uppercase;
  78.   }
  79. .post_meta {
  80. font-size:1.1em;
  81.   }
  82. .post_text {
  83.   font-size:1.1em;
  84.   line-height:1.8em;
  85.   margin:20px 0px 0px 0px;
  86.   padding:0px;
  87.   }
  88. p {
  89.   margin:10px 0px 0px 0px;
  90.   padding:0px;
  91.   }
  92. img.post_text {
  93.   margin:0px 0px 10px 0px;
  94.   padding:0px;
  95.   }
  96. .post_footer {
  97.   background:#121212;
  98.   border-top:1px solid #181818;
  99.   border-bottom:1px solid #181818;
  100.   font-size:1.1em;
  101.   margin:10px 0px 40px 0px;
  102.   padding:5px;
  103.   }
  104. .post_footer a {
  105.   color:#B2B2B2;
  106.   }
  107. #up_nav {
  108.   margin:0px 0px 20px 0px;
  109.   padding:0px;
  110. }
  111. h3#comments {
  112.   color:#FF0000;
  113.   font-size:1.1em;
  114.   margin:20px 0px 20px 0px;
  115.   padding:0px;
  116.   text-transform:uppercase;
  117. }
  118. ol.commentlist {
  119.   list-style:none;
  120.   margin:0px;
  121.   padding:0px;
  122. }
  123. .commentlist li {
  124.   font-size:1em;
  125.   line-height:1.6em;
  126.   list-style:none;
  127.   margin:0px 0px 10px 0px;
  128.   padding:0px 0px 10px 0px;
  129. }
  130. h3#respond {
  131.   background:#121212;
  132.   border-top:1px solid #181818;
  133.   border-bottom:1px solid #181818;
  134.   color:white;
  135.   font-size:1.1em;
  136.   font-weight:normal;
  137.   margin:20px 0px 20px 0px;
  138.   padding:5px;
  139. }
  140. .comment_input {
  141.   margin:0px 0px 10px 0px;
  142. }
  143. input {
  144.   background:#121212;
  145.   border:1px solid #181818;
  146.   color:#B2B2B2;
  147.   font-family:"Lucida Sans", "Trebuchet MS", "Helvetica", "Arial", sans-serif;
  148. font-size:0.9em;
  149. font-weight:bold;
  150.   margin:0px;
  151.   padding:5px;
  152.   width:188px;
  153. }
  154. .label {
  155.   font-family:"Lucida Sans", "Trebuchet MS", "Helvetica", "Arial", sans-serif;
  156. font-size:0.9em;
  157. font-weight:bold;
  158.   margin:0px 0px 0px 10px;
  159.   padding:0px;
  160. }
  161. textarea#comment {
  162.   background:#121212;
  163.   border:1px solid #181818;
  164.   color:#B2B2B2;
  165.   font-family:"Lucida Sans", "Trebuchet MS", "Helvetica", "Arial", sans-serif;
  166. font-size:0.9em;
  167. font-weight:bold;
  168.   margin:10px 0px 0px 0px;
  169.   padding:5px;
  170.   width:388px;
  171. }
  172. input#submit {
  173.   color:white;
  174.   font-size:1.1em;
  175.   font-weight:normal;
  176.   margin:10px 0px 0px 0px;
  177.   padding:5px;
  178.   width:400px;
  179. }
  180. #down_nav a {
  181.   color:#B2B2B2;
  182.   font-size:1.1em;
  183. }
  184. #sidebar {
  185.   float:right;
  186.   margin:0px;
  187. padding:0px;
  188. text-align:left;
  189.   width:200px;
  190.   }
  191. h2 {
  192.   background:#121212;
  193.   border-top:1px solid #181818;
  194.   border-bottom:1px solid #181818;
  195.   color:white;
  196. font-size:1em;
  197. margin:0px;
  198. padding:5px 5px 5px 10px;
  199. text-transform:uppercase;
  200.   }
  201. ul {
  202.   margin:0px 0px 20px 0px;
  203.   padding:0px;
  204.   }
  205. li {
  206.   border-bottom:1px solid #181818;
  207. font-size:1em;
  208. list-style:url(http://egonomia.free.fr/wp-content/themes/Kwinks/images/sidebar_bullet.jpg) inside;
  209.   margin:0px;
  210.   padding:3px 0px 3px 10px;
  211.   }
  212. #who {
  213.   border:none;
  214.   font-size:1em;
  215.   line-height:1.6em;
  216.   list-style:none;
  217.   padding:10px 10px 0px 10px;
  218. }
  219. #syndication_margin {
  220.   margin:0px 0px 5px 0px;
  221. }
  222. #syndication {
  223.   border:none;
  224.   font-size:1em;
  225.   list-style:none;
  226.   padding:5px 10px 0px 10px;
  227. }
  228. #recent-comments {
  229.   border:none;
  230.   list-style:none;
  231.   margin:0px;
  232.   padding:0px;
  233. }
  234. h2.widgettitle {
  235.   list-style:none;
  236. }
  237. .recentcomments {
  238.   list-style:none;
  239. }
  240. #categories-1 {
  241.   border:none;
  242.   list-style:none;
  243.   margin:0px;
  244.   padding:0px;
  245. }
  246. #archives {
  247.   border:none;
  248.   list-style:none;
  249.   margin:0px;
  250.   padding:0px;
  251. }
  252. #links {
  253.   border:none;
  254.   list-style:none;
  255.   margin:0px;
  256.   padding:0px;
  257. }
  258. .spacer {
  259.   clear:both;
  260.   }
  261. #footer {
  262.   border-top:1px solid #181818;
  263.   margin:40px 0px 20px 0px;
  264.   padding:20px 0px 0px 0px;
  265.   text-align:center;
  266. }


---------------
Kwinks up your day with Egonomia (Mon Blog) --> http://egonomia.free.fr/
n°1706888
Forgaria
Posté le 24-03-2008 à 10:04:15  profilanswer
 

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.   }
  8. #sidebar h2 {
  9.   background:#121212;
  10.   border-top:1px solid #181818;
  11.   border-bottom:1px solid #181818;
  12.   color:white;
  13. font-size:1em;
  14. margin:0px;
  15. padding:5px 5px 5px 10px;
  16. text-transform:uppercase;
  17.   }
  18. #sidebar ul {
  19.   margin:0px 0px 20px 0px;
  20.   padding:0px;
  21.   }
  22. #sidebar li {
  23.   list-style:none;
  24. }
  25. #who {
  26.   background:none;
  27.   border:none;
  28.   font-size:1em;
  29.   line-height:1.6em;
  30.   padding:10px 10px 0px 10px;
  31. }
  32. #syndication_top {
  33.   background:none;
  34.   border:none;
  35.   font-size:1em;
  36.   margin:5px 0px 0px 0px;
  37.   padding:5px 10px 0px 10px;
  38. }
  39. #syndication {
  40.   background:none;
  41.   border:none;
  42.   font-size:1em;
  43.   padding:5px 10px 0px 10px;
  44. }
  45. .widget ul li {
  46.   border-bottom:1px solid #181818;
  47. font-size:1em;
  48. list-style-type:none;
  49.   background:transparent url(http://egonomia.free.fr/wp-content/themes/Kwinks/images/sidebar_bullet.jpg) top left no-repeat;
  50.   margin:0px;
  51.   padding:3px 0px 3px 27px;
  52. }
  53. #recent-comments ul li {
  54.   list-style:none;
  55.   padding:3px 0px 3px 10px;
  56. }


 
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/

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

  Différence entre FF et IE : Liste

 

Sujets relatifs
[Excel+VBA]Liste déroulante associée à une autre liste déroulante !Différence données entre affichage et table
[XML] Différence entre balisesCrrer une liste d'entier
VBA EXCEL liste déroulante entre deux fichiersListe générique en C
sélectionner une liste entière si checkbox cochéeformulaire html et liste déroulante, problème avec l'option par défaut
Différence texte IE et FIrefox 
Plus de sujets relatifs à : Différence entre FF et IE : Liste


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