Problème internet exlorer

Bonjour à tous. Sur tous les navigateurs mon blog s'affiche correctement, mais sur internet explorer, lorsque je regarde un article seul, ma sidebar se positionne tout en bas à droite. J'ai pourtant bien fermé chaque div. Je pense à un problème de dimension de boite, mais je n'arrive pas à le résoudre. Avez-vous une solution ?

Mon blog : Http://www.jeremyplasseraud.com/

Ma Css :

/******* STRUCTURE GENERALE *******/

/******* STRUCTURE GENERALE *******/

body {
font-family: Trebuchet Ms, Arial, Sans-serif;
font-size: 0.8em;
text-align: left;
background: white;
color: black;
margin: 0;
}

#page {
margin: 0 auto 0 auto;
width: 950px;
}

#header h1 {
text-indent: -5000px;
margin: 0;
line-height: 0;
}

#header img {
padding-top: 20px;
}

#content {
float: left;
width: 660px;
margin-bottom: 20px;
margin-left: 10px;
}

#sidebar {
float: right;
width: 250px;
margin-right: 10px;
border-left: 1px solid #eee;
}

#footer {
font-size: 1em;
background: white;
clear: both;
width: 950px;
text-align: center;
}

/******* POLICES  *******/

h1,h2, h3, h4, h5{
font-family: Century Gothic;
font-weight: lighter;
}



/******* CONTENU  *******/

#content h2 {
font-size: 20px;
font-weight: lighter;
margin: 11px 0 0 0;
padding: 0;
}

.postmetadata {
font-size: 0.8em;
color: black;
}

.post_content {
font-size: 1em;
color: black;
}

.date{
display: inline;
font-size: 1.4em;
color:#666666;
font-weight: lighter;
font-family: Century Gothic;
}

/******* SIDEBAR *******/

#sidebar ul{
list-style-type: none;
margin: 0;
padding: 0 5px;
}

#sidebar {
float: right;
width: 250px;
margin: 5px 0 20px 25px;
}

#sidebar h2 {
font-size: 1.5em;
}

#sidebar h2 {
/padding-top: 10px;
}

.recentcomments ul{
list-style-image: url("../img/etoile.gif");
}

#sidebar img {
display: block;
margin-left: auto;
margin-right: auto;
}


/******* FOOTER *******/

#footer ul{
text-align: center;
font-size: 1em;
}

#footer li {
display: inline;
}

/******* ZONE COMMENTAIRES*******/


.comments-template{
margin: 10px 0 0 0;
}

.comments-template ol{
margin: 10px;
padding: 0 0 0 15px;
list-style: none;
}

.comments-template ol p{
font-family: Trebuchet MS, Arial, Hevletica, Sans-serif;
font-size: 0.9em;
}

.comments-template ol li{
margin: 10px 0 0 0;
line-height: 15px;
padding: 0 0 10px;
}

.comments-template h2, .comments-template h3{
font-size: 1.2em;
}

.commentmetadata{
font-size: 0.9em;
}

.comments-template p.nocomments{
padding: 0;
}

.comments-template textarea{
font-family: Trebuchet MS, Arial, Hevletica, Sans-serif;
font-size: 0.9em;
}

.cadre_commentaires {
border-bottom: 1px solid black;
border-top: 1px solid black;
}

/******* LIENS *******/

a {
color: #FF0099;
text-decoration: none;
}


#content h2 a{
font-size: 1.2em;
font-family: Century Gothic, Lucida Grande, Verdana, Arial, Sans-Serif;
color: #FF0099;
}

.post_content a {
color: black;
}

.post-infos {
background-color: #FCFCFC;
padding: 10px 10px 10px 10px;
}

.post-infos a {
color: #FF0099;
}
img {
border: none;
}


/******* MENU *******/

#menu li {
display: inline;
list-style-type: none;
text-transform: uppercase;
font-size: 1em;
word-spacing: 5px;
}

#menu {
border: 1px solid #FF0099;
padding-left: 160px;
/margin-left: 0;
/margin-top: 1.5px;
margin-top: 3.5px !important;

}

Merci à tous !
Modifié par jeremyp (26 Dec 2007 - 15:53)

Bonjour,

Deux remarques:

1. Pourrais-tu corriger ton message précédent (en passant par le bouton «Editer» en haut à droite) pour baliser correctement les blocs de code que tu cites? Il s'agit d'utiliser les balises [ code] et [ /code] (sans espace après le crochet ouvrant). Merci d'avance.

2. Le site indiqué n'est pas visible en raison d'une erreur de syntaxe PHP.

C'est fait msieur

Pour le problème lui-même: il se pose uniquement avec Internet Explorer 6 (et peut-être le 5 également, pas testé, mais pas avec IE7). À vue de nez, les deux blocs principaux (#content et #sidebar) étant flottants, le problème vient du fait que le deuxième flottant (#sidebar en float: right) n'a pas la place de se loger à droite du premier, et par conséquent il passe à la ligne.

Déjà, on peut se demander:
- pourquoi deux flottants alors qu'un seul suffit à placer deux éléments côte-à-côte?
- pourquoi mettre une marge à gauche au flottant de droite?... elle est inutile, et en cas de petit décalage elle peut le forcer à passer à la ligne.

Solution simple et rapide: mettre à zéro (plutôt qu'à 25px) la marge de gauche de #sidebar.

Pour une solution plus complète, on regardera sans doute si on n'a pas de petit problème de Doubled Margin Bug ou de Three Pixel Jog (deux bugs bien connus d'IE6 impactant les flottants).

J'ai mis comme expliqué la marge de gauche de #sidebar à 0, cependant il semble que le problème persiste lorsque l'on regarde l'article seul.

Comment résoudre le problème alors ?
Régler le problème de Doubled Margin Bug ou de Three Pixel Jog ?

Merci d'avance !

jeremyp a écrit :
Comment résoudre le problème alors ?
Régler le problème de Doubled Margin Bug ou de Three Pixel Jog ?

Plutôt en corrigeant la structure de ton code HTML qui est erronée sur ce type de page.

body {

font-family: Trebuchet Ms, Arial, Sans-serif;

font-size: 0.8em;

text-align: left;

background: white;

color: black;

margin: 0;

}



#page {

margin: 0 auto 0 auto;

width: 950px;

}



#header h1 {

text-indent: -5000px;

margin: 0;

line-height: 0;

}



#header img {

padding-top: 20px;

}



#content {

float: left;

width: 660px;

margin-bottom: 20px;

margin-left: 10px;

}



#sidebar {

width: 250px;

margin-right: 10px;

border-left: 1px solid #eee;

}



#footer {

font-size: 1em;

background: white;

clear: both;

width: 950px;

text-align: center;

}



/******* POLICES  *******/



h1,h2, h3, h4, h5{

font-family: Century Gothic;

font-weight: lighter;

}







/******* CONTENU  *******/



#content h2 {

font-size: 20px;

font-weight: lighter;

margin: 11px 0 0 0;

padding: 0;

}



.postmetadata {

font-size: 0.8em;

color: black;

}



.post_content {

font-size: 1em;

color: black;

}



.date{

display: inline;

font-size: 1.4em;

color:#666666;

font-weight: lighter;

font-family: Century Gothic;

}



/******* SIDEBAR *******/



#sidebar ul{

list-style-type: none;

margin: 0;

padding: 0 10px;

}



#sidebar {

float: right;

width: 250px;

margin: 5px 0 20px 0;

}



#sidebar h2 {

font-size: 1.5em;

}



#sidebar h2 {

/padding-top: 10px;

}



.recentcomments ul{

list-style-image: url("../img/etoile.gif");

}





/******* FOOTER *******/



#footer ul{

text-align: center;

font-size: 1em;

}



#footer li {

display: inline;

}



/******* ZONE COMMENTAIRES*******/





.comments-template{

margin: 10px 0 0 0;

}



.comments-template ol{

margin: 10px;

padding: 0 0 0 15px;

list-style: none;

}



.comments-template ol p{

font-family: Trebuchet MS, Arial, Hevletica, Sans-serif;

font-size: 0.9em;

}



.comments-template ol li{

margin: 10px 0 0 0;

line-height: 15px;

padding: 0 0 10px;

}



.comments-template h2, .comments-template h3{

font-size: 1.2em;

}



.commentmetadata{

font-size: 0.9em;

}



.comments-template p.nocomments{

padding: 0;

}



.comments-template textarea{

font-family: Trebuchet MS, Arial, Hevletica, Sans-serif;

font-size: 0.9em;

}



.cadre_commentaires {

border-bottom: 1px solid black;

border-top: 1px solid black;

}



/******* LIENS *******/



a {

color: #FF0099;

text-decoration: none;

}





#content h2 a{

font-size: 1.2em;

font-family: Century Gothic, Lucida Grande, Verdana, Arial, Sans-Serif;

color: #FF0099;

}



.post_content a {

color: black;

}



.post-infos {

background-color: #FCFCFC;

padding: 10px 10px 10px 10px;

}



.post-infos a {

color: #FF0099;

}

img {

border: none;

}





/******* MENU *******/



#menu li {

display: inline;

list-style-type: none;

text-transform: uppercase;

font-size: 1em;

word-spacing: 5px;

}



#menu {

border: 1px solid #FF0099;

padding-left: 160px;

/margin-left: 0;

/margin-top: 1.5px;

margin-top: 3.5px !important;

}

Voilà mon code corrigé selon vos instructions !
Modifié par jeremyp (26 Dec 2007 - 15:50)

Pour le code HTML, j'avais déjà constaté qu'il avait été corrigé. Il me semble à priori correct, sauf peut-être le passage suivant:

#menu {
	border: 1px solid #FF0099;
	padding-left: 160px;
	[#red]/margin-left: 0;[/#]
	[#red]/margin-top: 1.5px;[/#]
	margin-top: 3.5px !important;
}

(de quoi s'agit-il exactement? De hacks? C'est un peu bricolé...)

Non, le problème principal vient, comme je l'indiquais, de la structure du code HTML qui est erronée. Voici ce que m'affiche Firebug, par exemple:



(Pour la petite histoire, la différence de rendu pour les pages ayant cette structure HTML erronée vient d'un problème de dépassement des flottants qui ne se fait pas dans Internet Explorer à cause du HasLayout... si si.)