28173 sujets

CSS et mise en forme, CSS3

[résolu] Liste à puce à coté d'une image en float >>> pb so

Salut tout le monde,

Voilà mon problème :

J'ai un conteneur avec à l'intérieur une image en float et du texte à côté qui doit s'enrouler autour de l'image. Dans ce texte, j'ai une liste à puce personnalisée.
Sous FF pas de souci par contre sous IE mes puces en background se retrouvent sous l'image et non en face direct des <LI>.

Le problème est visible sur http://www.gross.fr/dev/chocolatier-patissier/produits-traiteur.php au niveau du paragraphe "Snacking" notamment.

mon code HTML simplifié :
<div class="collarge">
		  <img src="image.jpg"width="160" height="160" class="floatleft" />
		    <p>Du texte... 
			<ul>
				<li>item 1</li>
				<li>item 2</li>
				<li>item 3;</li>
				<li>item 4</li>
			</ul>
			</p>
		</div>


mon code CSS:

ul {
	list-style-type:none;
	list-style-position:inside;
	margin:5px 0 10px 0px;	
}
li {
	line-height: 1.5em;
	background-image: url("../img/puce-classic.gif");
	background-repeat: no-repeat;
	background-position:0px 6px;	
	padding-left: 15px;	
}
.floatleft {	
	float:left;		
	margin:0 10px 10px 0;
	padding:5px;	
}



Sur http://www.blog-and-blues.org/weblog/2004/09/19/302-gerer-espace-a-gauche-liste-selon-les-navigateurs j'ai vu q'un gars avait eu le même souci que moi mais n'avait pas réussi à trouver la soluce.

Y a t'il une bonne âme dans la salle qui aurait été confronté à ce pb et aurait un bon ptit hack à proposer ? Smiley smile

merci d'avance
Modifié par thio valone (16 Nov 2006 - 10:55)
Salut !
Je viens de visionner ton site avec IE 6 et FF, et je ne vois pas de différence... Smiley rolleyes

Edit : As-tu essayé la solution proposée par Laurent Denis ?
Quand on modifie uniquement soit la marge, soit le remplissage d'une liste, on se retrouve donc
avec un résultat différent selon les navigateurs. 
Pour y remédier, il suffit de toujours spécifier à la fois les valeurs de margin et de padding pour 
les éléments ul et ol, en mettant l'un des deux à zéro.

Modifié par Cygnus (14 Nov 2006 - 20:04)
C'est bizarre que tu vois pas la différence entre les deux navigateurs. Chez moi les puces disparaissent bien sous l'image en float (sous la tartine Smiley smile ). En fait le pb est visible partout où il y a une image en float left et une liste à puces à droite...

Pour le fait de mettre les valeurs à 0, j'avais déja essayé mais ça doit pas être là d'ou vient le pbleme ... Smiley ohwell
Modérateur
bonjour,

un defaut du au haslayout et les balise de type block s'etalant sous les flottants.

pour IE un: 
display:inline-block;
pour <ul>
par exemple fera l'affaire Smiley smile

++
nickel tu me sauve gcyrillus ! Smiley lol Smiley lol Smiley lol

Ca résout bien mon pblème par contre j'avais jamais entendu parler du couple 
display:inline-block;

Ca sert à quoi au juste ? Un élément peut pas etre à la fois inline et block non ? Smiley rolleyes
Modérateur
bah oui , justement ,c'est ça !
à la base c'est un truc de microsoft, qui permet entre autre d'activer le layout.
Mais qui se revele parfois surprenant dans IE , selon qu'il est appliqué sur un element a la base "inline" ou "block", et selon le mode "quirk" ou "standard" .

Ce display:inline-block; est passé dans les standards , mais n'a pas les effet que IE lui donne.
Dans les autres navigateurs , la regle a le même effet sur un block ou un inline et firefoxe ne comprend pas cette regle.
Dans les 2 cas elle permet de demarqué l'element concerné et un flottant le cotoyant.

++
Sujet clos
Aller à