[ Résolu ] Problème de décalage d'un menu sous IE6

Bonjour,

Mon problème vient du fait que j'ai un décalage avec mon menu par rapport au contenu. Page en ligne ici.

code css:

body
{
	margin: 10px 0 ;
	padding: 0 ;
	text-align: center ;
	font: normal 82%/200% "Trebuchet MS", helvetica, sans-serif ;
	background: #dea ;
}

div#conteneur
{
	width: 770px ;
	margin: 0 auto ;
	text-align: left ;
	border: 2px solid #ab4 ;
	background: #fff ;
}

h1#header
{
	height: 258px ;
	background: url("../Images_site/pellicule.png") no-repeat right top ;
	margin: 0 ;
}

h1#header a
{
	width: 400px ;
	height: 150px ;
	display: block ;
	background: url("../Images_site/titre_site.png") no-repeat ;
	position: relative ;
	left: 10px ;
	top: 15px ;
	text-indent: -5000px ;
}

ul#menu
{
	height: 35px ;
	margin: 0 ;
	padding: 0 ;
	list-style: none ;
	text-align: center ;
	background: url("../Images_site/fond_menu.png") repeat-x 0 -25px ;
}

ul#menu li
{
	display: inline ;
	margin-right: 1px ;
}

ul#menu li a
{
	padding: 0 20px ;
	border-right: 1px solid #600 ;
	font: 1em "Trebuchet MS",Arial,sans-serif ;
	line-height: 1em ;
	text-align: center ;
	text-decoration: none ;
	color:#000000 ;
}

ul#menu li a:hover
{
	text-decoration: underline ;
}

div#contenu
{
	padding: 0 25px 0 100px ;
	background: url(bg_page.gif) no-repeat 15px 15px ;
}

p#footer
{
	margin: 0 ;
	padding-right: 10px ;
	line-height: 30px ;
	text-align: right ;
	color: #8a0 ;
}

#main {
	text-align: left;
	margin: 20px auto;
	width: 600px;
	background: #fff;
	padding: 20px 30px 70px;
	border-top: 1px solid #E6E6DF;
	border-right: 1px solid #E6E6DF;
	border-bottom: 5px solid #E6E6DF;
	border-left: 1px solid #E6E6DF;
}

/* Text Styles
------------------------------ */
h2 {
	font: 120% "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #002E5B;
	margin-top: 25px;
}

h2 a:link, h2 a:visited, h2 span {
	color: #8DB8CF;
}

h3 {
	font: 120% "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #002E5B;
	margin-top: 30px;
}

/* Link Styles
------------------------------ */
a:link, a:active { text-decoration: underline; color: #17A; }
a:visited { text-decoration: underline; color: #035; }
a:hover, a:focus { text-decoration: underline; color: #6BD; }

/* Miscellaneous
------------------------------ */
hr {
	clear: both;
	height: 0;
	border: 0;
	border-top: 1px solid #E6E6DF;
	margin: 0 0 12px 0;
	padding: 0;
}

img {
	border: 0;
}

blockquote {
	border-left: 1px dotted #96967E;
	margin-left: 20px;
	padding-left: 20px;
	color: #363630;
}

/* Page Navigation
------------------------------ */
ul.pagelist {
	clear: both;
	padding: 0;
	margin: 20px 0 0 0;
	list-style-type: none;
}

ul.pagelist li {
	display: inline;
}

ul.pagelist li a, ul.pagelist span.disabledlink {
	padding: 4px;
}

ul.pagelist li.current a {
	font-weight: bold;
	text-decoration: none;
	cursor: default;
	color: #5A5A4B;
}

ul.pagelist li.prev {
	margin-right: 10px;
}

ul.pagelist li.next {
	margin-left: 10px;
}

.disabledlink {
	color: #ddd;
	cursor: default;
}

.pagenav {
	clear: both;
}

...

Je vous remercie pour votre aide.
Modifié par Chypster (08 Aug 2007 - 16:31)

Bonjour,

À priori, ça vient du positionnement assez étrange (et il faut bien le dire: affreusement bricolé) de div#contenu et div#main.

Questions en vrac:
- pourquoi du padding sur div#contenu?
- pourquoi une largeur fixe sur div#main, si justement on utilise du padding sur div#contenu?
- pourquoi pas des marges sur div#main plutôt que du padding sur div#contenu?

Je pense que les styles pour ces deux blocs sont à remettre à plat.

En supprimant le width: 600px (à priori inutile) de div#main, ça commence déjà à ressembler à quelque chose. De même si on garde cette largeur, mais en supprimant les padding latéraux sur div#contenu.

Pour parfaire le tout, il faudra peut-être un petit overflow: hidden sur div#conteneur.

tu n'as pas tort, je vais revoir ses deux blocs en tenant compte de tes suggestions.
Merci.

Bon voilà problème résolu, merci beaucoup.
Dis moi si tu vois autre chose qui peut être amélioré, n'hésites pas .

J'ai juste enlevé les paddings latéraux de div#contenu mais laisser le width: 600px du div#main qui est la largeur du cadre ou se trouve la photo et l'intitulé de chaque galerie.

Secondo, j'ai rajouté overflow: hidden dans div#conteneur mais peux tu me dire à quoi sert vraiment cette fonction ?