background image pour firefox ?

firefoxman
Invité n'ayant pas de compte PHPfrance

17 déc. 2006, 17:30

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 !

Administrateur PHPfrance
Administrateur PHPfrance | 11457 Messages

17 déc. 2006, 18:10

Dans quel élément de ton formulaire appliques-tu ce style ?

firefoxman
Invité n'ayant pas de compte PHPfrance

17 déc. 2006, 18:42

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 !

Mammouth du PHP | 19672 Messages

17 déc. 2006, 18:47

Tu as ça en ligne quelque part ?
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:

Modérateur PHPfrance
Modérateur PHPfrance | 6037 Messages

17 déc. 2006, 19:24

url(images/ombre.gif)
à remplacer par

Code : Tout sélectionner

url('images/ombre.gif')
Règle n°2 du webmaster : Toujours commencer par le HTML qu'on veut obtenir....toujours ! :priere:
J'aime apprendre de nouvelles choses.

Eléphant du PHP | 71 Messages

18 déc. 2006, 12:03

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: