Tuto design à 2 colonnes - Problèmes avec IE6

Bonjour à tous,

Après avoir découvert quelques uns de vos excellents tutos, j'ai souhaité en mettre un en application. Etant un inconditionnel des tableaux, je me suis lancé sur le design sans tableaux.

J'ai suivi pas à pas vos instructions mais j'ai des problèmes avec IE6. Tout d'abord, le contenu ne s'affichait pas dans le content prévu à cet effet, ni le menu d'ailleurs. en cherchant dans le forum, j'ai trouvé la solution (rajouter div devant #content dans le css pour ie6). Maintenant, tout s'affiche correctement mais les liens du menu sont inactifs et le contenu également.

Je vous met un lien vers ma page pour que vous puissiez voir ce que ça donne : Ma Page

Je vous mets les codes css : 1. IE

#global {
	height: 100%;
	background: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="global2.png", sizingMethod="scale");
	position: static;
	}
#content {
	display: inline;
	}
div#center {
   overflow: visible;
   height: 1%;
}

#content, #sidebar {
	margin-top: 15px;
	}
a, pre {
	position: relative;
	}
body {
	position: relative;
	}

2. css normal

html, body {
	height: 100%;
	margin: 0;
	}
div#global {
	min-height: 100%;
	width: 750px;
	padding: 0 10px;
	margin: 0 auto;
	position: relative;
	background: url(global2.png) center repeat-y;
	}
div#center {
	/* Pour éviter la superposition 
	du pied de page et du contenu : */
	padding-bottom: 50px;
	overflow: auto;
	}
div#footer {
	position: absolute;
	width: 750px;
	bottom: 0;
	background: #7fcf2e url(footer.png) repeat-x;
	color: #fff;
	}
div#content {
	float: right;
	width: 530px;
	margin-left: 10px;
	}
div#sidebar {
	float: left;
	width: 200px;
	}
html {
	background: #ddd url(html.png);
	}
div#header {
	background: #7fcf2e url(banner.png) no-repeat;
	color: #fff;
	height: 149px;
	position: relative;
	}

ul#menu {
	margin: 0;
	padding: 0;
	list-style: none;
	}
ul#menu li a {
	display: block;
	height: 30px;
	line-height: 30px;
	background: url(fond_lien.png) no-repeat left top;
	padding-left: 35px;
	margin: 2px 0;
	border-bottom: 1px solid #7fcf2e;
	color: #390;
	font: small-caps 1.1em/30px Georgia,serif;
	text-decoration: none;
}
ul#menu li a:hover {
	background-position: left bottom;
	color: #c30;
}
div#sidebar h3, div#footer p, div#sidebar p  {
	padding: 0 10px;
	color:#c00;
	}
body {
	font: 90% "Trebuchet MS", sans-serif;
}
div#content h2 {
	padding-left: 35px;
	background: #fff url(titre.png) left center no-repeat;
	color: #6c0;
	}
div#content h3 {
	color: #c00;
	font-variant: small-caps;
	}
div#footer p {
	margin: 2px 0;
	font-size: 0.9em;
	}
a {
	color: #6c0;
	font-weight: bold;
	}
a:hover {
	color: #c00;
	}

Merci d'avance de m'aider à résoudre ce petit problème.

PS : J'envisage de séparer en deux blocs distincts, la bannière du contenu. C'est faisable avec ce design?
Modifié par jplabes (08 Jun 2007 - 09:56)

Salut,

Je viens de rajouter, à tout hasard,à toutes les lignes du css pour IE des div, et les liens sont de nouveau actifs...

Par contre si vous vouliez bien m'aider pour la séparation entre la bannière et le reste du contenu, ça serait sympa!

Je suis paumé dans tous ces div.

Merci!

Salut,

Il faut remettre la bannière à l'intérieur de #global :

<div id="global">
   <div id="header">...</div>

Je viens de voir que tu utilises une image de fond en CSS pour la bannière. C'est une très mauvaise idée, car elle est ainsi inaccessible aux lecteurs d'écran, navigateurs texte, ... tout comme aux robots d'indexation des moteurs de recherche ... Il faut placer l'image dans le code HTML, en dur, avec <img src="..." alt="texte-alternatif-adapté" />