[CSS][IE]image dans input text

Version imprimable

Voici ma feuille de style :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* CSS Document */
form 
{
FONT-FAMILY: Arial, Helvetica, sans-serif; MARGIN: 0px; BORDER-SPACING: 0px; PADDING: 0px; 
}
input[type="submit"] { 
BORDER-RIGHT: 1px solid #A10000; BORDER-LEFT: 1px solid #FF1717; BORDER-TOP: 1px solid #FF1717; BORDER-BOTTOM: 1px solid #A10000; FONT-WEIGHT: bold; COLOR: #FFFFFF; BACKGROUND-COLOR: #E30000; FONT-SIZE: 12px; 
} 
input[type="text"] 
{ 
BORDER: #CCCCCC 1px solid; PADDING-LEFT: 7px; COLOR: #000000; BACKGROUND-IMAGE: url('../images/form.gif'); BACKGROUND-REPEAT: NO-REPEAT; BACKGROUND-COLOR: #FFFFFF; FONT-SIZE: 12px; 
} 
textarea
{ 
BORDER: #CCCCCC 1px solid; PADDING-LEFT: 7px; COLOR: #000000; BACKGROUND-IMAGE: url('../images/form.gif'); BACKGROUND-REPEAT: NO-REPEAT; BACKGROUND-COLOR: #FFFFFF; FONT-SIZE: 12px; 
}

Le probleme est que sous IE (6), je n'arrive pas a avoir l'image de fond pour les inputs de type text (les textarea fonctionnent très bien)

Est-ce normal ???

merci d'avance de m'aider :)

14/03/2005, 22h36
lejert

ma question a t-elle été assez claire ???

Je suis assez perplexe quand à la compatibilité d'internet explorer ...
14/03/2005, 23h54
Olivier_

Les sélecteurs CSS ne sont pas reconnu par IE.
En général, on ajoute une class="text" (ou autre) aux input pour les mettre en forme plus facilement.
Merci IE ;)

Merci !!!!

Voici la solution :

css :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
input[type="submit"] { 
BORDER-RIGHT: 1px solid #A10000; BORDER-LEFT: 1px solid #FF1717; BORDER-TOP: 1px solid #FF1717; BORDER-BOTTOM: 1px solid #A10000; FONT-WEIGHT: bold; COLOR: #FFFFFF; BACKGROUND-COLOR: #E30000; FONT-SIZE: 12px; 
} 
input[type="text"] 
{ 
BORDER: #CCCCCC 1px solid; PADDING-LEFT: 7px; COLOR: #000000; BACKGROUND-IMAGE: url('../images/form.gif'); BACKGROUND-REPEAT: NO-REPEAT; BACKGROUND-COLOR: #FFFFFF; FONT-SIZE: 12px; 
} 
/* Pour IE
.bg_form
{
BORDER: #CCCCCC 1px solid; PADDING-LEFT: 7px; COLOR: #000000; BACKGROUND-IMAGE: url('../images/form.gif'); BACKGROUND-REPEAT: NO-REPEAT; BACKGROUND-COLOR: #FFFFFF; FONT-SIZE: 12px; 
}
*/
textarea
{ 
BORDER: #CCCCCC 1px solid; PADDING-LEFT: 7px; COLOR: #000000; BACKGROUND-IMAGE: url('../images/form.gif'); BACKGROUND-REPEAT: NO-REPEAT; BACKGROUND-COLOR: #FFFFFF; FONT-SIZE: 12px; 
}

html :

Code:

1
2
 
<input type="text" class="bg_form" name="textfield">

16/03/2005, 23h46
Olivier_

Un petit conseil, evite les quote (') dans les url(), c'est source de bugs dans plusieurs navigateurs.
Essai aussi de mettre tes propriété en minuscule pour améliorer la lisibilité ;)
Et aussi de mettre tes styles bien en colone proprement, toujours pour la lisibilité, à la fin c'est plus facile pour s'y retrouver .
17/03/2005, 09h43
lejert

ok !

Merci :)

Bonjour,
Cela ne marche pas sur IE6

Code:

1
2
3
4
 
input[type="submit"] { 
BORDER-RIGHT: 1px solid #A10000; BORDER-LEFT: 1px solid #FF1717; BORDER-TOP: 1px solid #FF1717; BORDER-BOTTOM: 1px solid #A10000; FONT-WEIGHT: bold; COLOR: #FFFFFF; BACKGROUND-COLOR: #E30000; FONT-SIZE: 12px; 
}