28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Depuis deux heures que je googlise sans succès, je me permets de poser ma question ici en espérant ne pas avoir raté la solution dans mes recherches infructueuses.

J'aimerais simplement placer une petite image 12px/12px devant un titre h2.
J'ai ce code:

h2 {
	color:#6F94A6;
	font:normal 17px Verdana;
	margin: 0 0 20px 0;
	padding:0 0 0 25px;
             background:url(/templates/layout/products/puce.png) 0px 3px no-repeat;
}


Parfait partout (ie7, ff, safari, ..) mais pas d'image sous ie6. La, je butte vraiment. Merci de vos réponses.
Modifié par phenix (09 May 2008 - 10:19)
Bonjour,

1. L'image est bien dans un format compris par IE6? Est-ce du PNG-8, du PNG-32? Est-ce que ça marche avec une image différente (en GIF ou JPEG)?

2. Est-ce que ça change quelque chose si tu réordonnes les valeurs de la propriété background (par exemple: background: url(/templates/layout/products/puce.png) no-repeat left 3px;) ou si tu utilises les différentes propriétés background-image, background-repeat et background-position à la place?
Bonjour et merci de la réponse.
Je suis parti exactement sur les mêmes pistes que toi, ce qui m'a fait penser à un problème ailleurs. Et là, c'est un peu la honte pour moi mais voici la solution: ne pas travailler sur une css en local et faire ctrl+s en espérant modifier la feuille de style distante. J'ai l'habitude de bosser en direct sur mon site et la c'est un collègue qui a ouvert ma feuille de style dans mon logiciel mais il a ouvert la css de la sauvegarde du site et moi, bêtement je pensais bosser sur le version en ligne, alors mes changements et test png ou gif...dans le vent.

La solution sinon était effectivement de passer l'image en gif, le png de ma puce n'étant pas pris en compte par ie6.

Merci encore, prochaine fois je ne me ferai plus attraper Smiley cligne
phenix a écrit :
La solution sinon était effectivement de passer l'image en gif, le png de ma puce n'étant pas pris en compte par ie6.

C'est tout de même étrange.
En PNG-8 tu ne devrais pas avoir le moindre problème. En PNG-32 tu n'auras pas la transparence graduelle avec IE6, mais l'image apparaitra.

Tu es sûr que tu avais bien mis l'image en ligne (...)?
Oui c'est effectivement très étrange. L'image était en png-24 et bien présente en ligne. Le simple fait de la passer en gif + upload + modifier css en conséquence et c'est ok.

Par contre en ajoutant par exemple juste pour tester

width:100%;


ma puce apparaissait bel et bien mais en se dilatant pour prendre tout le h2. Ce qui supprimait pour moi l'option png non-pris en compte.
Ça pourrait éventuellement être un bon vieux bug de HasLayout (cf. la FAQ). Mais je ne l'ai jamais croisé celui-là. Smiley confuse
Les mystères du web..heureusement qu'on a des navigateurs qui réagissent de façon différente...quel ennui sinon XD;)