Problème de style CSS sur champ input text

Version imprimable

14/12/2011, 08h43
elekaj34

Problème de style CSS sur champ input text
Bonjour,

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

Code:

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

et le CSS associé
Code:

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:

input.formFieldInput { }

Sous IE (8 et 9, j'ai pas testé les autres) mes input son totalement transparent, y compris la bordure :cry::cry:
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 8O !
Sauf que bien sur les champs ne sont plus styliser comme je le voudrais :aie:

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 !
14/12/2011, 09h24
Sekigawa
Salut !

Alors ça c'est bizarre !! :aie:

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:

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 ^^

:mrgreen:

1 pièce(s) jointe(s)

Bonjour,

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

Code:

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>

14/12/2011, 10h53
elekaj34

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 :oops: :aie:

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

Désolé pour ce dérangement inutile