28220 sujets

CSS et mise en forme, CSS3

Bonjour bonjour tout le monde,
Je suis débutant en CSS et je recontre un petit problème d'affichage sous IE.
J'ai fait beaucoup de recherches sur le forum ainsi que sur les différents liens proposés ici mais le problème reste intacte.

Je mets deux captures d'écran pour mieux appréhender le problème :
sous IE 5, 6:

http://img375.imageshack.us/img375/9467/affie0wf.th.jpg

et sous FF,NS 6,Opera:

http://img384.imageshack.us/img384/826/affoperaffns9xk.th.jpg

voici mon code CSS :

#global {
	width:auto;
	margin-left:8px;
	margin-right:8px;
	border-left: 2px solid #4FACE7;
	border-right: 2px solid #4FACE7;
	overflow:auto;
	background-color:green;
}

#content {
	margin: 0px;
	margin-top:0px;
	margin-right:170px;
	background: rgb(167,94,156);
	/*border-left: 2px solid #4FACE7;*/
}


#centrage_cadre {
	text-align:center;
}

#sidebar {
	float:right;
	width:160px;
}

#actualites {
	margin-bottom:10px;
	background-color: rgb(211,236,250);
	color:black;
	border: 1px solid #C3C2C2;
	z-index:3;
}

#divers {
	margin-top:0px;
	margin-bottom:0px;
	color:black;
	background-color:rgb(255,181,135);
	border: 1px solid #C3C2C2;
}

#footer {
	clear:both;
	margin-left: 8px;
	margin-right: 8px;
	margin-bottom:8px;
	margin-top:0px;
	height: 40px;
	background:rgb(79,172,231);
	z-index:0;
}





et mon code HTML :

	<div id="global">
		<div id="sidebar">
			<div id="actualites">
				<h4>Actualités</h4>
				<h5><a class="lien_alternatif" href="http://www.spi-informatique.com">Portes ouvertes SPI les 2 et 3 décembre 2005 ...</a></h5>
				<h5><a class="lien_alternatif" href="http://www.spi-informatique.com">Présentation de la société le 15 Janvier 2006 ...</a></h5>
				<h5><a class="lien_alternatif" href="http://www.spi-informatique.com">Portes ouvertes SPI les 2 et 3 décembre 2005 ...</a></h5>
				<h5><a class="lien_alternatif" href="http://www.spi-informatique.com">Présentation de la société le 15 Janvier 2006 ...</a></h5>
				<h5><a class="lien_alternatif" href="http://www.spi-informatique.com">Suite ...</a></h5>
			</div>
			<div id="divers"> 
				<p><a class="lien_alternatif" href="http://www.spi-informatique.com">Accueil</a></p>
				<p><a class="lien_alternatif" href="http://www.spi-informatique.com">Plan du site</a></p>
				<p><a class="lien_alternatif" href="http://www.spi-informatique.com">Informations légales</a></p>
				<br/>
				<p>
				<a href="http://validator.w3.org/check?uri=referer"><img class="noborder"
					src="http://www.w3.org/Icons/valid-xhtml10"
					alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
				</p>
			</div>
		</div>
		<div id="content"> 
			<h4>Agences</h4><br/>
		</div>
	</div>
	
	<div id="footer"> 
		<div id="footer_left">
		</div>
		<div id="footer_middle">
			<p>&copy; SPI Informatique 2005</p>
		</div>
		<div id="footer_right">
			<p>Ce site à été optimisé pour Internet Explorer 
			  5.0 + Netscape 6.0 + ,Mozilla Firefox, Opéra. Meilleure résolution de 800 * 600.</p>
		</div>
	</div>



Le comportement sous FF ou Opera ou netscape est exemplaire mais pas sous IE qui refuse d'adapter automatiquement le conteneur global en vert (oui je sais les couleurs sont moches Smiley lol mais ca se voit mieux) à la taille du plus grand (ici le sidebar) .
J'ai bien essayé la méthode du bouquin de Raphaël GOETTER avec l'astuce de la ligne horizontale <hr>, mais le résultat est délicat sous IE et une marge est appliquée en haut et bas de la ligne selon les navigateurs. Bref, elle ne me plait pas.

Edit : J'espère que les images en thumbnail feront l'affaire
Edit 2 : Je viens de m'apercevoir que l'option overflow fonctionne mal sous NS 6. L'affichage apparait correct, mais en passant sur un lien sur le sidebar droite le conteneur "global" se réduit tout seul à la hauteur du conteneur "content"
Modifié par K4sh (17 Nov 2005 - 15:10)