28173 sujets

CSS et mise en forme, CSS3

[Resolu] Image devant liste sous IE

Bonjour,

je souhaite réaliser un menu sous forme de liste en css mais je ne sais pas si je m'y prends correctement car mon affichage est différent dans IE et Mozilla.

upload/13183-LISTES-ET-.jpg 


<div id="contenu">
	<div id="menuproduit">
		<ul>
			<li><img class="epigauche" src="../images/epi_lambert.gif" /><a href="#">Mecanique <br />des pates</a></li><br />
			<li><img class="epigauche"src="../images/epi_hengel.gif" /><a href="#">Surgelation<br />fermentation</a></li><br />
			<li><img class="epigauche"src="../images/epi_tibiletti.gif" /><a href="#">cuisson</a></li><br />
		</ul>
	</div>
...
</div>


j'ai opté pour les images devant le lien car en mettant des puces, ça se plaçait n'importe comment.

voici mon code css

div#contenu{
	width:770px;
	padding:0;
	margin:0;
}
			
			
div#menuproduit {
	width: 130px;
	float: left;
	padding:0;
}

div#menuproduit ul{
	margin-left:5px;
	padding:0;
	list-style-type:none;
	line-height:20px;
	}

div#menuproduit ul li a{
	text-transform:uppercase;
	font-family:Arial, Helvetica, sans-serif;
	font-size:0.6em;
	font-weight:bold;
	color:#FFFFFF;
	letter-spacing:-1px;
	text-decoration:none;
}

div#menuproduit ul li a:hover{
	text-decoration:underline;
}
			
.epigauche{
	float:left;
	margin-left:8px;
	margin-right:10px;
	margin-bottom:10px;
	margin-top:10px;
}


Je ne comprends pas pourquoi dans IE ça déconne.
J'ai essayé de modifier les marges, mais rien n'y fait.

D'avance merci
Modifié par selinav (16 Jul 2007 - 16:02)
je m'y prenais mal, j'ai donc opté pour un positionnement avec des blocs


<style type="text/css">
div#menuproduit {
				width: 130px;
				float: left;
				padding:0;
				background-color:#CCCCCC;
				}
div#bloc1{
	width:130px;
	height:35px;
	background-color:#99FFFF;
}
				

				

	
.texte a{
	text-transform:uppercase;
	font-family:Arial, Helvetica, sans-serif;
	font-size:0.6em;
	font-weight:bold;
	color:#FFFFFF;
	letter-spacing:-1px;
	text-decoration:none;
	
	
}

.texte a:hover{
	text-decoration:underline;
}
	
.epigauche{
			float:left;
			
			}


</style>

</head>

<body>
<div id="menuproduit">
				<div id="bloc1" class="texte"><img class="epigauche" src="../images/epi_lambert.gif" /><a href="#">Mecanique <br />des pates</a></div>
				<div id="bloc1" class="texte"><img class="epigauche"src="../images/epi_hengel.gif" /><a href="#">Surgelation<br />fermentation</a></div>
				<div id="bloc1" class="texte"><img class="epigauche"src="../images/epi_tibiletti.gif" /><a href="#">cuisson</a></div>
</div>

</body>
Sujet clos
Aller à