CSS / Compatibilité IE - Firefox

CSS / Compatibilité IE - Firefox - HTML/CSS - Programmation

Marsh Posté le 22-09-2010 à 23:33:22    

Bonjour à tous !
 
Je sollicite votre expertise CSS pour m'aider à solutionner un différentiel d'affichage assez important de mon site, entre Firefox et IE.
 
Le site (http://magikus.zeblog.com) s'affiche parfaitement sous Firefox ou Chrome : http://www.zeblog.com/blog/uploads/m/magikus/fx.jpg  
 
Pas sous IE :  
http://www.zeblog.com/blog/uploads/m/magikus/ie.jpg
 
Le problème d'affichage :
- Colonne de droite "exclue" du cadre et reléguée à droite
- Barre de pub "exclue" du cadre et reléguée à droite
 
Voici, ci-dessous, le CSS.  
Je pense qu'il s'agit d'un problème de "float".
Je vous remercie par avance de votre aide !
 

Code :
  1. /* ~~~~~~~~~~~ STYLES GENERAUX ~~~~~~~~~~~ */
  2. a:link, a:visited {
  3.     text-decoration: none;
  4.     color: #0066CC;
  5. }
  6. a:hover {
  7.     color: #FF6234;
  8. }
  9. body {
  10.     background-image:url("http://www.zeblog.com/blog/images/templates/bg.jpg" );
  11.     font-size:11px;
  12.     font-family:arial;
  13.     margin: 0;
  14.     padding: 0;
  15. }
  16. #centre {
  17. margin-right:10px;
  18. margin-right:170px;
  19. width:auto;
  20. position:relative;
  21. text-align:left;
  22. margin-top:5px;
  23. }
  24. .fenetre {
  25.     margin-top:5px;
  26.     border:1px solid #C4C4C4;
  27.     background:#FFFFFF;
  28.    -moz-border-radius: 6px;
  29.     }
  30.    
  31. #conteneur {
  32.     width:780px;
  33.     margin:0 auto;
  34.     }
  35.    
  36. #middle {   
  37.     border:1px solid #C4C4C4;
  38.     background:#FFFFFF;
  39.     -moz-border-radius: 6px;
  40.     margin:0 auto;
  41.     }
  42. .pied {
  43.     clear:both;
  44.     text-align:center;
  45.     margin-bottom:5px;
  46.     }
  47.    
  48. .footer {
  49.     text-align:center;
  50.     clear:both;
  51.     padding:7px;
  52.     margin-bottom:5px;
  53. }
  54. img.avatar {
  55. float: left;
  56. padding-right: 6px;
  57. }
  58. p.avatar {
  59.     margin: 0 0 10px 0;a
  60.     font-size:11px;
  61.     }
  62.    
  63. /* ~~~~~~~~~~~ BILLETS ~~~~~~~~~~~ */
  64. h2 {
  65.     letter-spacing:1px;
  66.     font-size:12px;
  67.     border-bottom:1px solid #99CC00;
  68.     color:#FF9900;
  69.     text-align:left;
  70.     margin:8px 0 5px 2px;
  71.     }
  72.    
  73. h2 a:visited, h2 a:link, h2 a:hover { /* Titre billet */
  74.     color:#FF9900;
  75.     }
  76.    
  77. div.billet {
  78. text-align:justify;
  79. margin-right:10px;
  80. margin-left:10px;
  81. }
  82. div.billet-header {
  83. margin-top:0;
  84. margin-bottom:3px;
  85. margin-right:10px;
  86. margin-left:10px;
  87. font-size:10px;
  88. color:gray;
  89. }
  90. div.billet-pied {
  91. margin-top:6px;
  92. margin-bottom:10px;
  93. margin-right:10px;
  94. color:gray;
  95. text-align:right;
  96. }
  97.     /* CALENDRIER */
  98.    table.calendrier {border: 0; background-color: #fff;}
  99.    table.calendrier td, th {text-align: center; border: 0}
  100.    table.calendrier th {height: 10px; font-size: 7pt;}
  101.    table.calendrier td {width: 19px; height: 10px; font-size: 8pt;}
  102.    table.calendrier .calendrier-mois {font-weight: bold; margin-top: 3px; font-size: 8pt; text-align: center}
  103.    table.calendrier .calendrier-mois a{text-decoration: none}
  104.    table.calendrier .calendrier-prec, table.calendrier .calendrier-suiv {font-weight: normal;}
  105.    table.calendrier th {text-align: center;}
  106.    table.calendrier td.lien-jour {font-weight: bold; background-color: #FCFCFC;}
  107.    table.calendrier td.lien-jour-selectionne {font-weight: bold; background-color: #F9F9F9;}
  108.    table.calendrier td.lien-jour a {text-decoration: none;}
  109.  
  110. /* ~~~~~~~~~~~ MENU ~~~~~~~~~~~ */
  111. #gauche {
  112.     width:150px;
  113.     float:right;
  114.     padding:0px;
  115.     margin-top:-8px;
  116.     margin-right:5px;
  117.     text-align:left;
  118.     }
  119. .menugauche {
  120.     list-style: none;
  121.     padding: 0;
  122.     margin-top: 0px;
  123.     margin-left: 10px;
  124.     margin-bottom:11px;
  125. }
  126. .menugauche li {
  127.     margin: 0;
  128.     padding: 0;
  129.     padding-bottom:3px;
  130.     font-family:verdana;
  131.     font-size:9px;
  132. }
  133. /* ~~~~~~~~~~~ HEADER ~~~~~~~~~~~ */
  134. #url {
  135.     color:#FFCDA0;
  136.     color: #1275D8;
  137.     letter-spacing:1px;
  138.     font-size:13px;
  139.     }
  140. h1 {
  141.     letter-spacing:3px;
  142.     font-family: Arial;
  143.     font-size: 15px;
  144.     color:#FF9900;
  145.     font-variant: small-caps;
  146.     margin-top:10px;
  147.     margin-bottom:10px;
  148.     padding:0
  149.     }
  150.    
  151. #fenetre {
  152.     margin-top:5px;
  153.     margin-bottom:5px;
  154.     border:1px solid #C4C4C4;
  155.     -moz-border-radius: 6px;
  156.     padding-left:5px;
  157.     background:#FFFFFF;
  158. }
  159. /* PAGES */
  160. #archives {
  161.     text-align:justify;
  162.     }
  163. #trackbacks {
  164.     margin-top:5px;
  165.     margin-bottom:10px;
  166.     text-align:left;
  167.     }
  168. #commentaires {
  169.     margin-top:5px;
  170.     margin-bottom:30px;
  171.     text-align:left;
  172.     }
  173.    
  174. div.commentaire-header { /* Header billet (auteur, date, catégorie) */
  175.     margin-bottom:5px;
  176.     font-size:11px;
  177.     color:#808080;
  178.     }
  179.    
  180. div.commentaire { /* Contenu billet */
  181.     text-align:justify;
  182.     margin-bottom:15px;
  183.     background : #FEFEFE;
  184.     padding:9px;
  185.     padding-top:15px;
  186.     padding-bottom:15px;
  187.     border:1px solid #F1F1F1;
  188.     color:#555555
  189.     }


Message édité par magikus le 23-09-2010 à 12:01:15
Reply

Marsh Posté le 22-09-2010 à 23:33:22   

Reply

Marsh Posté le 30-09-2010 à 00:46:32    

essaye de mettre ton #middle en overflow:auto;

Reply

Marsh Posté le 12-10-2010 à 14:17:14    

Problème presque résolu avec du overflow:hidden et la modification du float:left de #gauche en "position:absolute;top:150px;right:0px; width:150px;"
 
Merci pour votre aide !

Reply

Marsh Posté le 12-10-2010 à 14:18:52    

Le nouveau petit bug auquel je suis confronté (moins grave), est que la colonne "disparait" en partie quand on va tout en bas de la page sous IE ; une idée pour résoudre cela ?

Reply

Sujets relatifs:

Leave a Replay

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