28172 sujets

CSS et mise en forme, CSS3

Problème de background sur balise <a> dans IE

Bonjour à tous,

J'ai un souci CSS avec IE pour changer Smiley eek sur l'application d'un background sur une balise <a>.
Tout fonctionne bien pour des liens sur une seule ligne, mais le problème survient pour des liens sur des lignes.

Pour être clair, voici une image de ce que je voudrais obtenir:

upload/12857-ScreenShot.jpg

Pour l'exemple, je simule un conteneur <div> à la balise <a>

et voici le code que j'utilise pour le css
.lien_puce_bleue {
padding-right:15px;
background:url(../img/puce_bleue.gif) bottom right no-repeat;
text-decoration:none;
}


Ensuite j'applique ma class sur ma balise <a>

Sur firefox, aucun problème, celà se comporte exactement comme je le souhaite.

Par contre sur IE 6et7 on ne voit pas la puce:
[EDIT: l'image n'est pas la bonne l'upload ne fonctionne pas]
upload/12857-ScreenShot.jpg

En faisant quelques tests on dirait que la puce sous IE se cale en bas à droite comme si la balise A était en display:block, mais pas de restitution puisque seul la partie contenant du texte permet d'afficher le background.

Plus clairement, la puce est coupée:
[EDIT: l'image n'est pas la bonne l'upload ne fonctionne pas]
upload/12857-ScreenShot.jpg

Sur cette exemple j'ai donné une valeur en "px" au lieu d'un right.

J'ai essayé plusieurs solutions, en incluant des span dans la balise <a>, en jouant avec les display mais je ne trouve rien.

Je sais qu'il serait possible de mettre une image <img> mais j'ai des contraintes qui ne me permettent pas de faire ça..

Auriez vous ne serait-ce qu'un début de solution?

Merci d'avance! Smiley lol
Modifié par zecaraz (10 Sep 2008 - 16:53)
a écrit :

Bonsoir zecaraz,

Sauf erreur de ma part, sujet traité il y a 9 jours...

Cdt,
Sylvain


Merci pour ton aide Sylvain, je n'avais pas trouvé ce post malgrés mes recherches sur le forum...

Malheureusement les solutions qui sont proposées ne sont pas envisageable dans mon cas.

Je ne peux pas renvoyé le lien sur une seule ligne, obligé de garder l'ergo du site qui sera géré par un CMS et je ne peux pas inserer de javascript dans ce CMS.

Le problème reste donc entier.

Je sais que Florent V. est super calé et apporte souvent des réponses, donc d'après vous il n'est donc pas possible de résoudre ce problème? Smiley bawling
Bonsoir,
Je crois bien que Florent a deja repondu dans le lien précité , lien dans lequel j'ai proposé ou rappelé quelques alternatives possibles , alternatives qui ne te conviennent pas non plus .

En final , si ta puce/image n'apparait pas dans IE , c'est peut-etre mieux ainsi que plutot 'n'importe ou ?' .

La seule façon de t'assurer qu'elle sera visible , c'est , comme dit , en dure dans le source , comme ces smiley du forum :
Lien vers un wiki sur les Smyley , petites images sympatoches exprimant des emotions ... et j'en remet un peu pour forcer un eventuel retour a la ligne http://fr.wikipedia.org/wiki/Smiley Smiley cligne

<edit> tout n'est pas forcement possible Smiley smile , le lien c'etait juste pour y mettre une petite image a la fin </>
Modifié par re7 (10 Sep 2008 - 23:01)
Salut,

A cette heure, je n'ai pas lu les posts d'il y a 9 jours, je ne sais pas si ça va être bien utile ... Mais j'ai trouvé ça marrant.
Bon je vais faire dormir les yeux Smiley biggol 

<style>
body {
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
}

.conteneur {
width:140px;

}

a{
text-decoration:none;
position: relative;
padding-right: 15px;
display: block;/* --------- pour Opera --*/
}

a span{
width: 15px;
height: 15px;
background:url(http://zecaraz.fr.nf/test/img/puce_bleue.jpg) bottom right no-repeat;
position: absolute;/* --------- Ne pas donner de valeurs left, right, ... --*/
}

</style>
</head>

<body>
<div class="conteneur">
<a href="#" >Lien Lien Lien Lien Lien Lien <span></span></a>
</div>
</body>
C'est bien la première fois que je me retrouve face à un problème css qui ne trouve pas de solution, voir impossible à résoudre...

Bon je suis un peu entêté mais je vais continuer de chercher quand même.

En tout cas, merci beaucoup pour vos réponses! Smiley biggrin
Modifié par zecaraz (11 Sep 2008 - 11:18)
zecaraz a écrit :
C'est bien la première fois que je me retrouve face à un problème css qui ne trouve pas de solution, voir impossible à résoudre...
Euh... tu es sûr d'avoir bien essayé toutes les propositions proposées ? Smiley confuse
Modifié par Heyoan (11 Sep 2008 - 11:21)
zecaraz a écrit :
C'est bien la première fois que je me retrouve face à un problème css qui ne trouve pas de solution, voir impossible à résoudre...

Ben la solution est pourtant simple en CSS. Le problème que tu as n'est pas un problème de CSS, mais un problème dû à un bug d'Internet Explorer. Et tous les bugs ne peuvent pas être corrigés ou contournés sans le moindre effet secondaire. Smiley cligne
Sujet clos
Aller à