Dimension footer qui dépasse...

Bonjour,

Mon problème: mon footer dépasse à droite de quelques pixels du conteneur...

voici mon css :

/* POSITIONNEMENT */
html, body {
	height: 100%;
	margin: 0;
	}
#global {
	min-height: 100%;
	width: 750px;
	margin: 0 auto;
	position: relative;
	}
#footer {
	position: absolute;
	width: 100%;
	bottom: 0;
	}
#center {
	/* Eviter la superposition 
	du pied de page et du contenu */
	padding-bottom: 50px; 
	overflow: auto;
	}
#sidebar {
	float: left;
	width: 198px;
	}
#content {
	/* On laisse de la place à droite 
	pour l'autre colonne */
	float: right;
	width: 530px; 
	}
/* FONDS */
html {
	background: #ffffff /*url(html.png)*/;
	}
#global {
	padding: 0 10px;
	background: url(http://www.garage-botton-villard.com/global.png) center repeat-y;
	}
#header {
	background: #ff0000 url(http://www.garage-botton-villard.com/header.jpg) no-repeat;
	color: #fff;
	height: 200px;
	}
#header h1 {
	margin: 0;
	}
#footer {
	background: #ff0000; /*url(footer.png) repeat-x*/
	color: #fff; /*couleur blanche du texte du footer*/
	}
/* MENU */
ul#menu {
	margin: 0;
	padding: 0;
	list-style: none;
	}
ul#menu li a {
	display: block;
	height: 47px; /*hauteur des interlignes horizontales du menu*/
	background: url(http://www.garage-botton-villard.com/fond_lien.png) no-repeat left top;
	padding-left: 35px;
	margin: 2px 0;
	border-bottom: 1px solid #ff0000; /*soulignage des liens du menu navigation*/
	color: #ff0000;
	font: small-caps 1.1em/20px Georgia,serif; /*le 1.1em = la taille de la police de caractères et sinon l'espacement écriture et ligne du dessus, ça c'est les 20 pixels, */
	text-decoration: none;
}
ul#menu li a:hover {
	background-position: left bottom;
	color: #000000;
}
/* DECO */
body {
	font: 90% "Trebuchet MS", sans-serif;
	}
#content, #sidebar h3, #footer p, #sidebar p {
	padding: 0 10px;
	}
#content {
	padding: 0;
	margin-left: 10px;
	margin-top: 15px;/*pour mettre une marge entre l'en-tête et le contenu du site*/
	}
#sidebar {
	margin-top: 15px;/*pour mettre une marge entre l'en-tête et le contenu du menu*/
	}
	

	
	
	
/*test pour souligner les sous-titres des news et autres*/	
div#content h3.thenews
{
	margin-left: 15px ;
	padding-left: 5px ;
	border-bottom: 1px solid #ff0000 ;
	border-left: 3px solid #ff0000 ;
	color: #000000 ;
}

/*fin test pour souligner les sous-titres des news et autres*/		


/*test pour ne pas souligner Espace Admin*/	
div#sidebar a.hiphop
{
	text-decoration: none ;
}
/*fin test pour ne pas souligner Espace Admin*/	
	
	
	
#content h2 {
	padding-left: 35px;
	background: #fff url(http://www.garage-botton-villard.com/fond_lien.png) left center no-repeat;
	color: #000000;
	}

#sidebar h3 {
	color: #000000;
	font-variant: small-caps;/*permet d'écrire en majuscules tout le temps avec la première lettre de chaque mot en grosse majuscule*/
	}
#footer p {
	margin: 2px 0;
	font-size: 0.9em;
	}
a {
	color: #ff0000;
	font-weight: bold;
	}
a:hover {
	color: #000000;
	}
#header {
	position: relative;
	}
#header h1 {
	position: absolute;
	margin: 0;
	padding: 0;
	bottom: 4px;  /*sert à placer le BIENVENUE dans le header*/
	left: 30px;  /*sert à placer le BIENVENUE dans le header*/
	font: 3em Georgia, serif;
	}




 
	
		
			
		

le site web en question (problème sur IE7 et FF) :

http://www.garage-botton-villard.com
Modifié par Skeud (27 Jan 2007 - 17:22)

c'est au niveau du #footer et de ses margin essaye de mettre margin-left: xxpx; et margin-right: xxpx;

le problème c'est que j'ai déjà un width = 100% comme dans le tuto 2 colonnes...donc si je rajoute tes 2 margin ca ne fait rien..

par contre le plus marrant (je vous assure qu'il y a encore 2 semaines avec le width à 100% ca marchait nickel sur IE6+IE7+FF, je sais plus ce que j'ai modifié depuis....je perds la tête je vous jure...), c'est que j'ai passé le 100% en 97,4% et là nickel sur FF et IE7 et par contre sur IE 6 ca me réduit mon footer...normal d'après moi mais franchement là je comprends pas pourquoi si je mets 100% pourquoi ca ne me fat pas un width = 750px?!?!?!

met width = 750px; au lieu de width: 100%;

héhé j'ai déjà essayé...le problème si je fais cela c'est que je retrouve un autre problème = mon footer apparait sur le texte si j'ai un long paragraphe dans mon content....incroyable?? vous l'avez dit...
je ne comprends vraiment pas

Tiens, c'est sympa cette manie de classer les propriétés CSS par type (habillage des fonds, habillage du texte, dimensionnement et positionnement, etc.), mais ça oblige à aller à la chasse aux propriétés dans toute la feuille de style pour savoir exactement quelles propriétés s'appliquent à quoi...
Enfin, chacun sa méthode.

Sinon, tu utilises un bottom: 0 mais pas de left: 0 pour ton pied de page, et il ne me semble pas que tu aies mis les padding de body à zéro (juste les marges). Tu peux commencer par ça, ne serait-ce que pour écarter ces pistes.

Autant pour moi, la largeur totale (100%) est celle d'un conteneur global et non pas celle de body. Il ne servira donc à rien de jouer sur le padding de body.

En fait, je ne vois pas où est le problème. Avec Firefox, le width: 100% marche parfaitement. div#footer est un enfant de div#global, et prendra donc 100% de la largeur de div#global. Si on lui applique un left: 0 (ou un right: 0, à vrai dire...), c'est encore plus flagrant.

Maintenant, si on veut que div#footer prenne la largeur de div#center, peut-être aurait-il fallu le placer dans div#center plutôt que dans div#footer...

Plus simple cependant : ne pas donner de couleur de fond à div#footer, mais uniquement au paragraphe qu'il contient, et donner des marges latérales à ce paragraphe pour qu'il s'aligne sur div#center.
Ça ne devrait pas être la mer à boire.