Problème de style CSS sur champ input text [Résolu]

elekaj34 · 14/12/2011, 08h43

Bonjour,

Sur un formulaire, avec un champ input défini comme ci-dessous :

Code :

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

<input class="formFieldInput" type="text" name="login"/>

et le CSS associé

Code :

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

1
2
3
4
5
6
7
input.formFieldInput {
	font-size: 1em;
	height: 20px; line-height: 20px;
	padding-left: 2px;
	vertical-align: middle;
	border: 1px solid #616161;
}

ou pire celui ci :

Code :

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

input.formFieldInput { }

Sous IE (8 et 9, j'ai pas testé les autres) mes input son totalement transparent, y compris la bordure

Aucun soucis sur les autres navigateurs.

Pour info je suis en XHTML 1.0 Transitional avec un code HTML valide et les CSS valide.

Si je supprime la classe CSS de mes input, tout rentre dans l'ordre

!
Sauf que bien sur les champs ne sont plus styliser comme je le voudrais

Est il possible de styliser les champs input ? (sous IE je veux dire)
Si oui, où est ce que se situe le problème (dans mon code) ?

Merci pour votre aide !

Sekigawa · 14/12/2011, 09h24

Salut !

Alors ça c'est bizarre !!

T'as essayé d'enlever 1 à 1 les propriétés css ? Ou de tester avec l'outil pour développeur d'IE ?

Ou juste de déclaré :

Code :

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

1
2
3
4
5
6
7
.formFieldInput {
	font-size: 1em;
	height: 20px; line-height: 20px;
	padding-left: 2px;
	vertical-align: middle;
	border: 1px solid #616161;
}

Franchement je vois pas lol Et je suis curieux de savoir où est le problème ^^

Torgar · 14/12/2011, 09h51

Bonjour,

Aucun problème pour ma part avec ce code sous IE (7-8-9) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html dir="ltr" lang="fr-FR" class="no-js">
 
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript">
 
    </script>    
    <style type="text/css">
    input.formFieldInput {
        font-size: 1em;
        height: 20px;
        line-height: 20px;
        padding-left: 2px;
        vertical-align: middle;
        border: 1px solid #616161;
        background-color: #ddddf4; /* test */
    }
    </style>
</head>
 
<body>
    <form action="" method="post">
        <input class="formFieldInput" type="text" name="login" />
    </form>
</body>
</html>

elekaj34 · 14/12/2011, 10h53

Toutes mes excuses, mon code (ainsi que les votres) fonctionnent très bien !

Mais alors ou était le problème ?
Fallait juste redémarrer IE

C'est en visitant un autre site que le mien, ou j'ai noté le même problème qui m'a mis la puce a l'oreille

Désolé pour ce dérangement inutile

14/12/2011, 10h53	#4
elekaj34 Membre à l'essai Inscription : mai 2007 Messages : 98 Détails du profil Informations forums : Inscription : mai 2007 Messages : 98 Points : 20 Points : 20	Toutes mes excuses, mon code (ainsi que les votres) fonctionnent très bien ! Mais alors ou était le problème ? Fallait juste redémarrer IE C'est en visitant un autre site que le mien, ou j'ai noté le même problème qui m'a mis la puce a l'oreille Désolé pour ce dérangement inutile
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email