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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  CSS / Compatibilité IE - Firefox

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

CSS / Compatibilité IE - Firefox

n°2024590
magikus
Posté le 22-09-2010 à 23:33:22  profilanswer
 

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


Message édité par magikus le 23-09-2010 à 12:01:15
mood
Publicité
Posté le 22-09-2010 à 23:33:22  profilanswer
 

n°2026050
Pascal le ​nain
Posté le 30-09-2010 à 00:46:32  profilanswer
 

essaye de mettre ton #middle en overflow:auto;

n°2028604
magikus
Posté le 12-10-2010 à 14:17:14  profilanswer
 

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 !

n°2028606
magikus
Posté le 12-10-2010 à 14:18:52  profilanswer
 

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 ?


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

  CSS / Compatibilité IE - Firefox

 

Sujets relatifs
Flash et CSS, template en ligne qui ne marche pascomment faire un lien interne en CSS?
problème avec xmlhttprequest et firefoxHTML/CSS: Problème - menu avec des images
Galerie d'image AS3 / Problème sous Firefox / MacRendre visible/invisible un sous menu en CSS ?
Compatibilité avec AndroïdModifier feuille de style CSS
Lancer un document word à partir de IECompatibilité CSS Firefox-IE
Plus de sujets relatifs à : CSS / Compatibilité IE - Firefox

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.056 secondes

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