28221 sujets

CSS et mise en forme, CSS3

Problème Positionnement CSS de la puce (image) d'une liste sous IE

Bonjour,

Je n'arrive pas positionner correctement mes puces (image en background d'un li) sous IE. La puce se retrouve sous l'image de gauche (image dynamique donc la taille peu varier).

Code HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Page Test</title>
<meta http-equiv="Content-Language" content="fr" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
	<div class="contenu">
		<div class="imagegauche">
			<img src="soleil.jpg" alt="vignette"/>
		</div>
		<ul>
			<li>test 1</li>
			<li>test 2</li>
			<li>test 3</li>
		</ul>
		<p>ceci est le texte de mon paragraphe.<br/>blablalba bzlabv lalbb alb la blab lab l<br/>gfddsg dsgg ssd ea ge aae glkae kl</p>
	</div>
</body>
</html>


Code CSS :

ul {
	margin : 0;
	padding : 0;
}

li {
	list-style : none;
	padding-left:15px;
	background-image : url(square.gif);
	background-repeat : no-repeat;
	background-position : 0 50%;
}

.imagegauche {
	float: left;
	margin: 0 5px 5px 0;
}

.contenu {
	width : 40%;
}


Si la taille de l'image de gauche était fixe j'appliquerais au tag ul :
_margin-left : 85px;


Mais dans le cas d'une image dynamique je ne vois pas comment faire Smiley bawling

Merci pour votre aide Smiley lol

Edit : Je n'arrive pas à uploader mes images donc pour info soleil.jpg fait 80x60 et square.gif 13x13
Modifié par Snork (10 May 2005 - 12:04)
Sujet clos
Aller à