Background sous firefox

Bonjour,

voila j'ai un petit soucis sous firefox, je souhaite appliquer un id pour y afficher une image de fond et ce dans un élement en ligne de type span, jusque la rien de bien compliqué mon soucis est que j'ai besoin d'encapsuler et sous FF rien ne s'affiche !!
voici mon 1er exemple :

<a href="toto.htm" id="lien_bouton">
<span>
<span id="back"></span>
texte
</span>
</a> 

ensuite j'ai tâcher de contourner le prb avec un input type image cette fois ça marche mais j'ai un contour de type bordure autour de mon image si quelqu'un connait comment la supprimer j'aurais un réponse a mon prb..

ex :

<a href="toto.htm" id="lien_bouton">
<span>
texte
<input type="image" id="back" src="#">
</span>
</a> 

Sachez que le span qui encapsule mon texte et mon image est fait expres il me permet de dynamiser le tout et de rendre le texte et l'img invisible dans un back office et ce grace au display:none;

ensuite et pour finir j'ai tacher de transformer un element de type block en element en ligne :

<p>
<a href="toto.htm" id="lien_bouton">
<span>
<span id="back"></span>qsqsqsqs
</span>
</a>
</p>

voici mon code css :

#back{
background-image:url(http://url/savant.gif);
width:64px;
height:64px;
}
/*dans le cas du block p*/
p{
display:inline;
margin:0;
padding:0;
}
a#lien_bouton{
text-decoration:none;
}
a:hover#lien_bouton{
text-decoration:underline;
}
#lien_bouton span{
}

Sachez que je ne peux pas utiliser la propriété float:left / right pour l'image...
c'est une contrainte que j'ai sinon je posterais pas...
je c'ext pas si quelqu'un pourra m'aiclairer ..
sous IE le resultat est nickel sous FF j'ai que le texte.

Merci a+
Modifié par Kreat (13 Jan 2006 - 10:38)

En fait je vais reformuler car je crains ne jamais avoir de réponses...
je ne parviens pas a faire un background-image dans un span dans le sens ou FF ne veut pas m'afficher l'image alors que IE si ..

ex :

<span id="mon_image"></span>

code css :

#mon_image{
background-image:url(toto.gif);
width:10px;
height:25px;
}

Si vous pouvez m'aider Merci.
Modifié par Kreat (13 Jan 2006 - 10:46)

pour n'utiliserais-tu pas un div à la place du span qui contient ton image ?

bah en fait c'est hallucinant mais ça ne passe pas non plus sous FF dés lors ou j'applique un element de type block avec la propriété display:inline j'ai pas d'affichage de cette image.... alors que sous IE si ...sniff ....

<div id="image"></div>

css :

div#image{
background-image:url(toto.gif);
display:inline;
width:10px;
height:10px;
}

mais de toute façon je suis qu'on puisse pas placer une image en background dans une element en ligne de type span sous FF, ça je capte pas la balise img étant elle aussi inline....
Modifié par Kreat (13 Jan 2006 - 16:21)

Kreat a écrit :

ensuite j'ai tâcher de contourner le prb avec un input type image cette fois ça marche mais j'ai un contour de type bordure autour de mon image si quelqu'un connait comment la supprimer j'aurais un réponse a mon prb..

salut

essaye

border: none;

non ?

Kreat a écrit :
bmais de toute façon je suis qu'on puisse pas placer une image en background dans une element en ligne de type span sous FF, ça je capte pas la balise img étant elle aussi inline....

C'est normal : ton span n'occupe aucun espace : les éléments de type "en-ligne" comme <span> ne peuvent pas posséder de dimensions (il faut modifier leur affichage avec display block par exemple, ou float ou encore position).

<img> est un type en-ligne spécial : c'est un "en-ligne remplacé". Elle fait donc partie des très rares éléments en-ligne qui peuvent avoir des dimensions.

Pour tous les autres éléments en-ligne :
- The 'width' property does not apply. A specified value of 'auto' for 'left', 'right', 'margin-left' or 'margin-right' becomes a computed value of '0'.
- The 'height' property doesn't apply, but the height of the box is given by the 'line-height' property.

Kreat a écrit :
ensuite j'ai tâcher de contourner le prb avec un input type image cette fois ça marche mais j'ai un contour de type bordure autour de mon image si quelqu'un connait comment la supprimer j'aurais un réponse a mon prb..

Le plus propre :

input[type="image"] {
border : none;
}

Manque de chance, IE6 ne comprend pas ce genre de sélecteur CSS2, il faut donc appliquer une classe par exemple :

input.taclasse {
border : none;
}

Modifié par Raphael (14 Jan 2006 - 18:14)

Merci pour ces précisions

je vais donc abandonner le span pour mon application, car j'ai des contraintes qui me permettent pas de jouer sur les element de type block ou des blocs transformés en type en ligne, je vais donc recourir a l'input avec ta technique pour supprimer la bordure je fais mes tests et je rend le post comme résolus ..

encore merci
Modifié par Kreat (16 Jan 2006 - 10:45)

Bon ba ça marche pas

les navigateurs m'affichent toujours cette petite bordure j'ai du louper une marche voici mon code :

code HTML :
<input type="image" class="image_fleche_suivant">


code css :
input.image_fleche_suivant{
background-image:url(fleche_suivant.gif);
border:none;
width:15px;
height:16px;
}

j'ai meme rajoutté ceci pour FF mais rien ne change :
input[type="image"]{
border:none;
}

ça donne ceci sous IE et FF :



j'espère que le prb vient de moi

a+
Modifié par Kreat (16 Jan 2006 - 10:54)

désolé de réinsister

mais rien y fait qui plus est lorsque j'aplique mon image en background dans un elememt de type block que je transforme en element en ligne malgrés les dimensions renseignés dans ma css et ben FF ne l'affiche pas non +

Kreat a écrit :
désolé de réinsister

mais rien y fait qui plus est lorsque j'aplique mon image en background dans un elememt de type block que je transforme en element en ligne malgrés les dimensions renseignés dans ma css et ben FF ne l'affiche pas non +

Logique, si ça ne marche pas pour un span, ça ne marchera pas non plus pour un élément que tu spécifies comme étant en ligne.

ok cela va de soi, par contre la technique de raphael ne marche pas sur un input type image lorsqu'on applique un id ou une class sur ce dernier avec en propriete une image et ses dimensions la bordure reste quelque soit le navigateur et la technique employée....cf ma capture....2 messages plus haut.

a+