Discussion :

[Gyl59]

Bonjour à tous,

je suis en traine de faire la mise en page d'un site et je tombe sur un petit problème.
J'ai dans ce site un champ input de type texte qui me permet de faire une recherche. Cette image ressemble à un champ de saisie de type Mac avec les bord arrondi et une petite loupe sur le côté gauche. La saisie commence donc à après la loupe. Ce champs a des bordure à 0px, seulement quand je met un padding-left et right ça fontionne parfaitement sur FF mais pas comme je le souahite sous IE.
En faite quand on commence à taper un texte dans le input sous IE, tout fonctionne normalement, mais quand le texte est trop grand, le texte passe outre les padding et se superpose à la loupe ce qui n'est pas très classe.





Je vous donne la partie de code concernant la classe css appliqué au champ input:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
input.input_recherche{
	background-image:url(../../images/zone_recherche.gif);
	background-repeat: no-repeat;
	_background-attachment: fixed;
	background-position: top center;
	padding-left: 21px;
	padding-right: 9px;
	width: 110px;
	height: 20px;
	border: 0px;
	font-size: 13px;
}

Maintenant le code HTML:

Code :

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

1
2
 
<input type="text" name="zone_recherche" class="input_recherche"  />

Merci à tous de votre aide

[neby55]

J'avoue trouver la réaction d'IE assez logique. Tu définis un padding dans la zone de texte de ton input. Ensuite, lorsque cette zone depassse l'affichage de l'input, la zone de texte se décale pour faire apparaitre la partie ou les caractères s'ajoutent.

Personnellement, pour contourner le problème, j'ajouterais une image avant l'input et une autre après (pour gérer les arrondis et la loupe).

[Gyl59]

J'ai fait comme tu m'as dit et ça fonctionne parfaitement.
Le seul truc c'est que ça reste frustrant de devoir déoupé une image alors que je pense qu'on doit pouvoir y arriver avec une majorité de navigateur.

Merci pour ta réponse.