28220 sujets

CSS et mise en forme, CSS3

Bonjour. Il y avait un problème connu sous IE qui faisait que la marge horizontale était doublée.

Cette fois ci, le problème se pose pour une margin verticale sous IE!!! je ne comprends pas.
Voici mon site, où vous pouvez voir que le menu s'étale trop en longueur sous IE et pas sous FF : http://www.notoon.com
Et hop le CSS:

div#menu{
	background: url(../design/site_nav.gif) no-repeat top;
	margin: 20px 0 30px 0;
	padding-top: 25px;
	width: 180px;
}

div#menu hr{
	background-color: #eef8fa;
	border: 0px;
	color: #eef8fa;
	height: 1px;
	margin: 0.5em 0 0.5em 0;
}
div#menu ul{
	color: #727498;
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-decoration: none;
}


Merci de votre aide !!
Modifié par notoon (07 Dec 2005 - 08:48)
J'ai finalement trouvé une solution partielle à mon problème.
En fait pour IE, <hr /> est un élément inline d'une hauteur de 7 pixels par défaut et pourvu de padding haut et bas figés à 7 pixels.

J'ai donc rajouté un display : block et des marges négatives (que pour IE). Ce qui donne

div#menu hr{
	background-color: #eef8fa;
	border: 0;
	color: #eef8fa;
	display: block;
	height: 1px;
	margin: 4.5px 0;
	_margin: -3px 0; /* Invalide mais obligatoire pour IE *%!$#!*% */
}


Apparemment il suffit de rajouter le _ pour que seul IE l'interprète.
Merci quand même Smiley biggrin