[résolu]Pb sous FF tuto design complet avec 2 colonnes de même haute

Bonjour à tous.
Je me permet de poster car je rencontre des difficultés sous firefox avec le tutoriel suivant:
Design-XHTML-CSS-complet-avec-2-colonnes-de-meme-hauteur

En effet, sous IE 7, y a aucun problème, par contre, sous FF j'ai un gros problème de présentation.

En lien, l'adresse de la page que j'ai réalisée: http://develop.web.free.fr/site_dread/template_1.htm

Pour décrire ce qui se passe sous FF, le menu de navigation caractérisé par la div sidebar ne se trouve pas du tout à la même hauteur que la div center. Il se met en dessous et ne semble pas non plus rester sur la largeur de colonne définit préalablement, à savoir 200px à droite de div#center.

Sous IE 6, ca fonctionne malgré la barre de séparation verte qui se colle plus au menu de navigation que sous IE7.

Je vous met aussi le code css:

html, body {
height: 100%;
margin:0;
}

body{
font: 90% "Trebuchet MS", sans serif;/* on applique une police et une taille de base pour les caractères. Mettre des "" pour un nom de police comportant un espace.*/
}

html {
background: url(http://develop.web.free.fr/site_dread/fond_site.png);
}

#global{
min-height:100%;
width:750px;
padding:0 10px;
margin: 0 auto;
position: relative;/*L'utilisation de position: relative; sur #global définit les frontières de l'élément #global comme point de repère pour le positionnement de ses enfants. La position "top: 0px, left: 0px" est maintenant le coin supérieur gauche de #global, au lieu de celui de body.*/
padding: 0 10px;
background: url(http://develop.web.free.fr/site_dread/separateur_colonne.png) center repeat-y;
}

#center {
padding-bottom: 50px;/*Pour éviter la superposition du pied de page et du contenu :*/
overflow: auto;/* Oblige la div#center à prendre en compte les flottants "float" dans le calcul de sa hauteur*/
}

#footer {
position: absolute;/* Permet de positionner le pied de page tout en bas même si le contenu de la page n'est pas assez long pour remplir l'écran*/
width: 100%;
bottom: 0;
background: #7fcf2e /*url(http://develop.web.free.fr/site_dread/footer.png) repeat-x*/;
color: #fff;
}

#content {
float: left;/* On place la colonne contenant le corps de la page à droite*/
width: 530px;
margin-left: 10px;/*On espace des bordures,le corps du texte situé dans la partie centrale*/
}

#content h2 {
	padding-left: 35px;
	background: #fff /*url(http://develop.web.free.fr/site_dread/titre.png) left center no-repeat*/;
	color: #6c0;
	}
#content h3 {
	color: #c00;
	font-variant: small-caps;
	}

#sidebar {
float: right;/* On place la barre de navigation à gauche*/
width: 200 px;
}

#sidebar h3, #footer p, #sidebar p {
padding: 0 10px;/* On espace le texte en le décollant des bordures à droite et à gauche*/
}

#header {
background: #7fcf2e url(http://develop.web.free.fr/site_dread/en-tete.jpg) no-repeat;
color: #fff;
height: 201px;
position: relative;
}

#header h1{
margin: 0;/* Suppression des marges du titre h1 pour que le fond monte jusqu'au sommet de la page sous firefox et opera*/
position: absolute;
bottom: 10px;
left: 30px;
font: 3em Georgia, serif;/* Police pour le nom de l'entreprise*/
}

/* Présentation des menus de navigation*/

ul#menu {
	margin: 0;
	padding: 0;
	list-style: none;
	}

ul#menu li a {
	display: block;
	height: 26px;
	line-height:26px;
	background: url(http://develop.web.free.fr/site_dread/puce_menu.gif) no-repeat left top;
	padding-left: 40px;/* eloigne le texte du menu de navigation vers la droite*/
	margin: 2px 0;
	border-bottom: 1px solid #7fcf2e;
	color: #6c0;
	font: small-caps 1.1em/26px Georgia,serif;/*Mise en forme du texte des boutons de navigation*/
	text-decoration: none;/* On enlève le soulignement qui se met par défaut sur les liens*/

}

ul#menu li a:hover {
	background-position: left bottom;
	color: #c30;
}

#footer p {
	margin: 2px 0;
	font-size: 0.9em;
	}

/* Mise en évidence des liens avec une attribution de couleur et de police plus grasse. Le survol sera marqué par un changement de couleur.*/
a {
	color: #6c0;
	font-weight: bold;
	}

a:hover {
	color: #c00;
	}

ainsi que le code pour IE6 au cas où:

#global {
	height: 100%;
	position: static;
	background: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://develop.web.free.fr/site_dread/separateur_colonne.png", sizingMethod="scale");
	}
#content {
	display: inline;
	}
#center {
	overflow: visible;
	height: 1%;
	}
a, pre {
	position: relative;
	}
body {
	position: relative;
	}
#content, #sidebar {
	margin-top: 15px;
	} 

Merci pour tout aide de votre part.
Modifié par dread (14 Jan 2007 - 17:21)

Bonjour dread.

Peux-tu s'il te plaît éditer ton message pour éviter que ta première url ne déforme le forum à cause de sa longueur ?

Salut!

Il faut supprimer l'espace entre le nombre et l'unité, pour la largeur de #sidebar:

#sidebar {
   width: [b]200px[/b] ;
}

Ça devrait déjà aller mieux

Salut!!
Je viens d'essayer ta solution Thomas D. et j'avoue que je ne pensais pas qu'un tel détail de synthaxe poserait autant de problème. Je te remercie beaucoup, tout marche à présent sur FF.
Merci encore. Bon week.

ça a l'air d'être un point de détail, mais cet espace empêche Firefox de comprendre que tu donnes une dimension à la colonne, ce n'est pas si étonnant d'avoir de gros problèmes de rendu!

Penses à utiliser le validateur la prochaine fois! Il devrait te signaler ce genre d'erreur

Au fait, tu considères que le sujet est [Résolu]?