28173 sujets

CSS et mise en forme, CSS3

Ie ajoute une marge de 3px

bonjour tous.

j'ai un problème de css avec ie.

je veux faire une page avec un menu a gauche, et un contenu a droite.

un grand classique, je sait.

je positionne ma partie_gauche en float:left;, et le margin-left de la partie droite a la même taille que le width de la partie_gauche.

et mon problème, c'est que ie ajoute une marge de 3px entre les 2 divs Smiley sweatdrop

comme les largeurs sont fixées, sous ie, j'ai la partie droite sous celle de gauche.
Smiley biggol

alors, ou j'ai besoin de nouveaux yeux pour lire les docs, ou j'ai raté un truc.

quoi qu'il en soit, quelqu'un peut il m'aider ? Smiley biggrin

voici une partie de mon html :

	<body>
		<div id="contenu">
			<div id="partie_gauche">
			</div>
			<div id="partie_droite">
				contenu
			</div>
		</div>
	</body>


et de mon css


#contenu {
	width: 764px;
	background-color: red;
	padding: 0;
	margin: 0;
	overflow: hidden;
}
#partie_gauche {
	float: left;
	height: 300px;
	width: 144px;
	margin: 0;
	padding: 0;
	background-color:Fuchsia;
}
#partie_droite {
	height: 500px;
	margin: 0;
	padding: 0;
	margin-left: 144px;
	width: 620px;
	background-color: Aqua;
}


pour avoir un design qui ressemble a peut pres a qqchose sous ie, mettre width:617 dans la partie droite.

je n'ai pas mis la partie droite en float:rigth pour étendre dynamiquement en hauteur le contenu (qui normalement possède une couleur de fond)

merci d'avance Smiley smile
Modifié par Petit Lulu (08 Jul 2005 - 17:43)
ca a l'air d'être tres exactement ce bug.

le seul petit problème, c'est que la solution proposée ne résoud pas mon problème.

j'ai besoin que ma partie droite soit adjacente a ma partie gauche.

dans leur exemple, ils ajoutent une marge de 10 px entre les deux Smiley sweatdrop

mais il est possible que je n'ai pas compris toute l'explication.

pour essayer la solution, mon css est devenu ceci :

#contenu {
	width: 764px;
	background-color: red;
	padding: 0;
	margin: 0;
	overflow: hidden;
}
#partie_gauche {
	float: left;
	height: 300px;
	width: 144px;
	margin: 0;
	padding: 0;
	background-color:Fuchsia;
}
#partie_droite {
	height: 500px;
	margin: 0;
	margin-left: 144px;
	padding: 0;
	width: 617px;
	background-color: Aqua;
}

/* Hide from IE5-mac. Only IE-win sees this. \*/
* html #partie_gauche {
	margin-right: 0px;
}

* html #partie_droite {
	height: 1%;
	margin-left: -0px;
}
/* End hide from IE5/mac */


ps : en tout cas, merci pour la réponse.
Modifié par Petit Lulu (11 Jul 2005 - 11:25)
En gardant ta CSS de départ, ajouter une CSS en commentaires conditionnelle, lue uniquement par IE:

<!--[if IE]>
<style type="text/css">
#partie_droite {
position: relative;
left: -3px;
}
</style>
<![endif]-->


<edit> Le BBCode du forum dénature ci-dessus la syntaxe de la fermeture du commentaire conditionnel. Je la reproduis ici :

<![ endif ]-->

Supprimer les deux espaces de part à d'autres du endif
Modifié par Laurent Denis (18 Jul 2005 - 11:59)
tout d'abord, un grand merci pour cette réponse Smiley cligne

mais ca ne fonctionne pas comme je le veux.

je m'explique :
1- c'est du code a ajouter dans le html, et je préfèrerais pouvoir l'intégrer dans mon fichier .css (c'est pas le plus grave, juste un peu embetant).

2- cela me positionne bien ma partie droite contre la partie gauche, mais cela ne change en rien la largeur. j'ai toujours une bande de 3 pixels, mais a droite.
je me suis dit : "bah, ajoute 3 pixels a ta largeur, remet le a 620 px de large !!".
sitot pensé, sitot fait! mais la, rebellote, j'ai ma partie droite de nouveau sous ma partie gauche Smiley sweatdrop

bref, je note la correction pour plus tard, mais je reste avec mon problème.
Smiley decu
Sujet clos
Aller à