Page 1 sur 1

background image pour firefox ?

Posté : 17 déc. 2006, 17:30
par firefoxman
Bonjour,

dans un formulaire,j'utilise ceci :

Code : Tout sélectionner

style="background-image: url(images/ombre.gif);"
Il fonctionne parfaitement sur IE mais pas sur Firefox ?

Y'aurait t'il une autre facon de mettre ce code pour qu'il soit compatible également Firefox ?

Merci !

Posté : 17 déc. 2006, 18:10
par albat
Dans quel élément de ton formulaire appliques-tu ce style ?

Posté : 17 déc. 2006, 18:42
par firefoxman
Dans un formulaire d'identification de membre :

Code : Tout sélectionner

<form method="post" action="members.php"> Pseudo : <input type="text" name="pseudo" id="pseudo" style="background-image: url(images/ombre.gif);" maxlength="10" size="10"><br> Code : &nbsp;&nbsp;&nbsp;<input type="password" name="mdp" id="mdp" style="background-image: url(images/ombre.gif);" maxlength="10" size="10"><br> <input type="image" src="images/btok.gif" name="submit"> </form>
Donc,sur IE,l'image s'affiche correctement mais pas sur firefox ?

Merci !

Posté : 17 déc. 2006, 18:47
par Cyrano
Tu as ça en ligne quelque part ?

Posté : 17 déc. 2006, 19:24
par mere-teresa
url(images/ombre.gif)
à remplacer par

Code : Tout sélectionner

url('images/ombre.gif')

Posté : 18 déc. 2006, 12:03
par Chakra Spirit
Salut,

Code : Tout sélectionner

<form method="post" action="members.php"> Pseudo : <input type="text" name="pseudo" id="pseudo" style="background-image: url(images/ombre.gif);" maxlength="10" size="10"><br> Code : &nbsp;&nbsp;&nbsp;<input type="password" name="mdp" id="mdp" style="background-image: url(images/ombre.gif);" maxlength="10" size="10"><br> <input type="image" src="images/btok.gif" name="submit"> </form>
Tu devrais passer tes textes Pseudo et Code en label associé à chaque input. Ainsi, grâce à l'attribut for, il suffit de cliquer sur le label pour donner le focus à l'input correspondant.
Les &nbsp; et <br> sont inutiles aussi. Tout élément de formulaire doit être de type block donc le mieux, c'est de placer tes éléments dans des div. Tu peux aussi jouer via CSS sur l'espace entre le label et l'input.
Enfin, sur un bouton de type image, il faut mettre l'attribut alt en cas de désactivation ou d'indisponibilité de l'image.

Tu aurais donc un truc du genre :

Code : Tout sélectionner

<form method="post" action="members.php"> <div> <label for="pseudo">Pseudo : </label> <input type="text" name="pseudo" id="pseudo" maxlength="10" size="10"> </div> <div> <label for="mdp">Code : </label> <input type="password" name="mdp" id="mdp" maxlength="10" size="10"> </div> <div> <input type="image" src="images/btok.gif" alt="submit" name="submit"> </div> </form>
et dans une feuille de style externe :

Code : Tout sélectionner

#pseudo, #mdp { background-image: url(images/ombre.gif); }
On ne met pas d'apostrophes au sein de url car cela fait buguer les vieux navigateurs, type NN4... :wink: