CSS / Compatibilité IE

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 :

Pas sous IE :

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 :

/* ~~~~~~~~~~~ STYLES GENERAUX ~~~~~~~~~~~ */
a:link, a:visited {
text-decoration: none;
color: #0066CC;
}
a:hover {
color: #FF6234;
}
body {
background-image:url("http://www.zeblog.com/blog/images/templates/bg.jpg" );
font-size:11px;
font-family:arial;
margin: 0;
padding: 0;
}
#centre {
margin-right:10px;
margin-right:170px;
width:auto;
position:relative;
text-align:left;
margin-top:5px;
}
.fenetre {
margin-top:5px;
border:1px solid #C4C4C4;
background:#FFFFFF;
-moz-border-radius: 6px;
}
#conteneur {
width:780px;
margin:0 auto;
}
#middle {
border:1px solid #C4C4C4;
background:#FFFFFF;
-moz-border-radius: 6px;
margin:0 auto;
}
.pied {
clear:both;
text-align:center;
margin-bottom:5px;
}
.footer {
text-align:center;
clear:both;
padding:7px;
margin-bottom:5px;
}
img.avatar {
float: left;
padding-right: 6px;
}
p.avatar {
margin: 0 0 10px 0;a
font-size:11px;
}
/* ~~~~~~~~~~~ BILLETS ~~~~~~~~~~~ */
h2 {
letter-spacing:1px;
font-size:12px;
border-bottom:1px solid #99CC00;
color:#FF9900;
text-align:left;
margin:8px 0 5px 2px;
}
h2 a:visited, h2 a:link, h2 a:hover { /* Titre billet */
color:#FF9900;
}
div.billet {
text-align:justify;
margin-right:10px;
margin-left:10px;
}
div.billet-header {
margin-top:0;
margin-bottom:3px;
margin-right:10px;
margin-left:10px;
font-size:10px;
color:gray;
}
div.billet-pied {
margin-top:6px;
margin-bottom:10px;
margin-right:10px;
color:gray;
text-align:right;
}
/* CALENDRIER */
table.calendrier {border: 0; background-color: #fff;}
table.calendrier td, th {text-align: center; border: 0}
table.calendrier th {height: 10px; font-size: 7pt;}
table.calendrier td {width: 19px; height: 10px; font-size: 8pt;}
table.calendrier .calendrier-mois {font-weight: bold; margin-top: 3px; font-size: 8pt; text-align: center}
table.calendrier .calendrier-mois a{text-decoration: none}
table.calendrier .calendrier-prec, table.calendrier .calendrier-suiv {font-weight: normal;}
table.calendrier th {text-align: center;}
table.calendrier td.lien-jour {font-weight: bold; background-color: #FCFCFC;}
table.calendrier td.lien-jour-selectionne {font-weight: bold; background-color: #F9F9F9;}
table.calendrier td.lien-jour a {text-decoration: none;}
/* ~~~~~~~~~~~ MENU ~~~~~~~~~~~ */
#gauche {
width:150px;
float:right;
padding:0px;
margin-top:-8px;
margin-right:5px;
text-align:left;
}
.menugauche {
list-style: none;
padding: 0;
margin-top: 0px;
margin-left: 10px;
margin-bottom:11px;
}
.menugauche li {
margin: 0;
padding: 0;
padding-bottom:3px;
font-family:verdana;
font-size:9px;
}
/* ~~~~~~~~~~~ HEADER ~~~~~~~~~~~ */
#url {
color:#FFCDA0;
color: #1275D8;
letter-spacing:1px;
font-size:13px;
}
h1 {
letter-spacing:3px;
font-family: Arial;
font-size: 15px;
color:#FF9900;
font-variant: small-caps;
margin-top:10px;
margin-bottom:10px;
padding:0
}
#fenetre {
margin-top:5px;
margin-bottom:5px;
border:1px solid #C4C4C4;
-moz-border-radius: 6px;
padding-left:5px;
background:#FFFFFF;
}
/* PAGES */
#archives {
text-align:justify;
}
#trackbacks {
margin-top:5px;
margin-bottom:10px;
text-align:left;
}
#commentaires {
margin-top:5px;
margin-bottom:30px;
text-align:left;
}
div.commentaire-header { /* Header billet (auteur, date, catégorie) */
margin-bottom:5px;
font-size:11px;
color:#808080;
}
div.commentaire { /* Contenu billet */
text-align:justify;
margin-bottom:15px;
background : #FEFEFE;
padding:9px;
padding-top:15px;
padding-bottom:15px;
border:1px solid #F1F1F1;
color:#555555
}

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

CSS / Compatibilité IE - Firefox

Sujets relatifs:

Leave a Replay