Mettre une image à la place d'un input submit

Version imprimable

Bonjour à tous,
J'essaie de mettre sur mon site une image en lieu et place d'un bouton input submit.

Code html
Code:

1 2 3 4 5 6 7 <div id="search"> <form action="search.php" method="get"> <input type="text" name='search' value='search...' class="field" /> <input type="image" src="templates/images/search.png" alt="Rechercher" class="image" /> </form> </div>
Code css
Code:

1 2 3 4 5 #search input.field { color: #777; height: 18px; line-height: 18px; border: solid 1px #999; padding: 2px; font-weight: normal; text-indent: 4px; } #search input.image { margin: 0 0 0 10px; }
L'image apparait est décalé par rapport au champ de texte.

Comment résoudre ce décalage. Vous pouvez le voir en ligne à url

Merci pour votre aide...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
#search input.image {
margin:0.5em 0 0.5em 10px;
}
.field {
border:1px solid #999999;
color:#777777;
float:left;
font-weight:normal;
height:18px;
line-height:18px;
padding:2px;
text-indent:4px;
}

Citation:

Envoyé par Ozareff

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
#search input.image {
margin:0.5em 0 0.5em 10px;
}
.field {
border:1px solid #999999;
color:#777777;
float:left;
font-weight:normal;
height:18px;
line-height:18px;
padding:2px;
text-indent:4px;
}

Exactement, merci à vous.:ccool: