Discussion :

[lanfeust129]

Bonjour à tous,

j'ai fait un login personnalisé en utilisant une image en background et en ajoutant par dessus les inputs. Mon code fonctionne bien sous firefox, tout est bien aligné mais pas sous IE...

(désolé pour le CSS éparpillé)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<div id="login">
<form action="" method="post">
<input name="action" value="login" type="hidden">
<input name="user" value="e-mail" style="border: medium none ; width: 80px; margin-left: 14px; background-color: transparent; vertical-align: middle; height: 17px; margin-top: 29px;" type="text">
<input name="pass" value="Mot de passe" style="border: medium none ; width: 60px; margin-left: 18px; background-color: transparent; vertical-align: middle; height: 17px; margin-top: 29px;" type="password">
<input src="../img/cadre/20x20.png" style="vertical-align: middle; background-color: transparent; margin-left: 7px; margin-top: 27px;" height="20" type="image" width="20">
<br><a href="../?action=register_form">
<img src="../img/cadre/20x20.png" style="border: medium none ; vertical-align: middle; background-color: transparent; margin-left: 10px;" height="20" width="40">
</a>
</form>
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
#login
{
	background-image: url("img/cadre/login.png");
	background-repeat: no-repeat;
	background-position: center;
	margin-left: 2px;
	height: 71px;
	width: 205px;
}

Voilà est-ce que quelqu'un aurait une meilleure idée pour la façon de faire ou simplement une correction de façon a ce que tout soit affiché de la façon ?

Merci d'avance

[Macmillenium]

Bonjour et bienvenue,

Les éléments de formulaire dépendent du navigateur et de l'OS, tu ne peux malheureusement pas faire grand chose.

[Damouille]

salut,

Quand je regarde ton image, je trouve que le decalage n'est vraiment pas flagrant. 2 ptis pix de trop vers le bas, c'est pas bien mechant.

Sinon, je crois que ie veut du line-height et FF du padding ou l'inverse. Tu peux toujours essayer une feuille de style en commentaires conditionnels en jouanr sur ces 2 valeurs.

[lanfeust129]

D'accord donc simplement un style propre à IE... Encore un

Sinon l'image que j'ai mise n'est pas celle qui est décalée, c'était simplement pour montrer le résultat.

Merci pour vos réponses