18041 sujets

Questions générales et questions de débutants

[RESOLU] Problème d'image de fond dans un titre avec un span

Bonjour,
je suis face à un petit souci sous IE avec un titre.
J'ai une image de fond que je veux mettre sur tout le titre, sauf derrière le texte du titre afin de voir le texte lisible.
J'ai donc fait le code suivant :
<h2><span class="fond-titre">Choix de l'article&nbsp;</span></h2>

et la CSS associée : 

.fond-titre{
            background-color:#F2F2F2;
}

h2{
            background-image: url(images/fond-titre.jpg);
            background-repeat: repeat-x;
            background-position: left center;
            color: #A19D84;
            padding-left:0;

}


J'ai le résultat que je veux sous firefox mais sous IE, l'image de fond est légèrement aussi avant le texte comme sur l'image : upload/2973-titre.jpg
et je n'arrive pas à enlever ce décalage.. J'ai bien tenté d'annuler le padding-left du h2, mais ça n'y change rien...on voit toujours le bout d'image de fond avant le texte sous IE...
J'ai regardé sur le forum mais je n'ai pas trouvé de réponse... Smiley decu

Quelqu'un a-t-il déjà rencontré le même problème? comment peut-on annuler cet effet?

Merci d'avance
Modifié par nelero (21 Feb 2007 - 14:24)
Salut.

Difficile de se pronnocer avec ces 2 petits morceaux de code, il nous faut le reste de la page pour se faire une idée de l'origine du problème. Un exemple en ligne serait l'idéal Smiley cligne

Quelle version d'IE provoque ce bug ? Est-ce qu'il y aurait une colonne flottante à gauche de ce titre, par hasard ?
Thomas D. a écrit :
Est-ce qu'il y aurait une colonne flottante à gauche de ce titre, par hasard ?

Hmmm... je sens bien le Three Pixel Jog, effectivement. Smiley ravi
Désolé de ne répondre que maintenant...
En ce qui concerne mon problème il est résolu grâce à vos commentaires rapides messieurs Florent V. et Thomas D. ! C'était en effet le bug "three pixel Jog" ou "three pixel gap"... vos commentaires m'ont permis d'aller directement chercher la solution sur le net. J'ai trouvé sur positioniseverything cet article plutôt clair et bien illustré http://www.positioniseverything.net/explorer/threepxtest.html

Encore merci, de m'avoir aiguillé Smiley ravi sinon je crois que j'y aurais passé un bon moment! Smiley sweatdrop
Florent V. a écrit :

Hmmm... je sens bien le Three Pixel Jog, effectivement. Smiley ravi


S'agit il d'une telle chose au nom exotique ou bien tout bêtement d'une des déclinaisons possibles des bug liés au haslayout chez IE ???

C'est à dire quasi 100% de ces fameux bugs IE après lesquels tout le monde braille jusqu'à plus soif (pauvres chéris Smiley rolleyes )tout en étant totalement incapable de mettre en place des procédures simples et efficaces permettant de les prendre en compte.

Si tel est le cas inutile de perdre son temps avec des articles tout aussi exotiques que l'appellation elle même (même s'ils vous crééent une réputation très vendable) et affronter le problème dans son ensemble :

http://www.test.blog-and-blues.org/haslayout/

Allez hop, au boulot et tout de suite sacré bon sang !!!
Modifié par Christian Le Bouler (21 Feb 2007 - 14:53)
Christian Le Bouler a écrit :
S'agit il d'une telle chose au nom exotique ou bien tout bêtement d'une des déclinaisons possibles des bug liés au haslayout chez IE ???

C'est un bug qui n'est pas lié au HasLayout. Par contre, un élément doté du layout ne réagira pas de la même manière : l'élément lui-même sera décalé, et pas uniquement le texte.

Pour référence :
http://www.test.blog-and-blues.org/haslayout/tests/float6.html
Sujet clos
Aller à