Probleme beim horizontalen Ausrichten von Formelementen

[Pierre]

Hallo liebe Forumer

habe mal wieder ein Problemchen, wo ich selber nicht weiterkomme und hoffe hier im Forum auf kompetente Hilfe.

Ich habe mein Problemchen in einem Testfile online gestellt, damit ihr auch grad den Code sehen könnt.
http://www.per-net.ch/test/form/test_formular.html

Das Problem ist, dass ich es nicht hinkriege, einen Submitbutton als Grafik pixelgenau zu platzieren. Egal ob ich den Button als input oder button definiere. Und wie zu den guten alten Zeiten, zeigt jeder Browser was anderes an:

Firefox:

• schiebt das Eingabefeld nach unten (oder den Button nach oben?).
• Zeigt das Image mit einem Padding beim button tag.

Safari: Macht fast dasselbe wie FF, aber nur fast ;-)

IE6:
Na ja, da hab ich eh nicht erwartete dass es funzt, reagiert aber auch sehr ähnlich.

IE7:
Kann ich grad nicht testen, weil die Dose mal wieder spinnt... :-(

Kann mir jemand sagen, wie ich es schaffe (natürlich ohne Tabellen ;-) diese beiden Elemente horizontal auf eine Linie zu bringen? Oder kann mir zumindest jemand sagen, woher diese Verschiebungen kommen und auf was die sich beziehen?

Herzlichen Dank für eure Tipps.
Pierre

[Nemesis]

Hallo Pierre,

hab's mal im Firefox 3 getestet. Da sieht das mit type=image so aus, wie auf der Grafik.
Bei IE7 ebenfalls.

Gruß
Nemesis

[Pierre]

So... nach langem Probieren hab ich doch noch eine Lösung gefunden. Ist wohl nicht das ideale, aber ein Workaraound, der in den gängigen Browsern funzt.

  
  
button {  
 width: 23px;  
 height: 23px;  
 border: none;  
 margin: 0;  
 padding: 0;  
 background: url(button_search_content.gif) no-repeat;  
 cursor: pointer;  
}  
  

  
 <button type="submit" name="suchen" value="suchen"></button>