Discussion :

[Medyo4zy]

Bonjour chers Membres

Mon problème se limite seulement pour IE 8, je trouve que le padding n'est pas bien calculé pour le ' input ' de ma barre de recherche.




Normalement l'écriture doit être bien centrée.

-----

Deuxième problème est pour l'image de validation de recherche, elle se place un peu plus haut, je voudrais qu'elle soit bien centré verticalement


Mon code HTML

Code :

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

1
2
3
4
5
<form id="recherche" action="#" method="get">
   <div>
      <input class="champs" type="text" name="recherche" value="Recherche..." />
   </div>
</form>

Mon code CSS

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
30
31
32
33
#recherche{
background:transparent url('images/menu.png') no-repeat;
width:285px;
height:37px;
text-align:left;
color:#9b450b;
font-size:12px;
font-family:arial;
padding:10px 5px 0 0;
margin:0;
position:relative;
}
.champs{
background:#000 url('images/icones/go.png') left no-repeat;
background-position:3px 3px;
border:1px solid #ad5d25;
color:white;
position:relative;
width:200px;
height:22px;
margin-right:5px;
padding:0 0 0 20px;
}
.go{
cursor:pointer;
background:transparent url('images/icones/check.png') no-repeat;
width:16px;
height:16px;
border:0;
margin:0;
padding:0;
position:relative;
}

Merci d'avance

[mab07]

Bonjour,

Peut-être une piste ici :
http://info.xumi.fr/index.php?page=news&id=13

[Medyo4zy]

Bonjour,

Peut-être une piste ici :
http://info.xumi.fr/index.php?page=news&id=13

Merci man, bonne piste !!

le proeblem venait de la class champs ::

Voici la version correcte :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.champs{
background:#000 url('images/icones/go.png') left no-repeat;
background-position:3px 3px;
border:1px solid #ad5d25;
color:white;
position:relative;
width:200px;
height:15px;
margin-left:5px;
 
padding-left:20px;
padding-top:4px;
padding-bottom:1px;
}

Résolu