Paeda: CSS + input-Felder + verschiede Browser = Problem :(

Guten Tag,

ich arbeite derzeit an einem neuen Projekt, bei dem es auf Pixel genaues Design ankommt. Zur Darstellung werden Tabellen und natürlich CSS verwendet.

Im Firefox klappt auch alles so, wie es soll. Alles wird genau an dem Punkt angezeigt, wie ich es mir wünsche. Jedoch macht mir mein Lieblingsbrowser Opera Ärger mit der Anzeige und da reiht sich auch noch der IE7 ein, der es sogar am schlimmsten anzeigt.

Es handelt sich um per CSS optisch angepasste input-Felder, welche im Opera und IE zu weit nach oben verschoben werden, obwohl der Firefox es genau da anzeigt, wo es soll und auch Dreamweaver diese platziert hat. Des weiteren vergrößert der IE die Tabellenzeile enorm (Höhe), in der sich das Formular befindet.

Um das Ganze mal etwas anschaulicher zu machen, hier ein Link zu einer Testseite, wo genau das Problem auftaucht:
http://www.grelli.name/new/test_w9uT/test.html

Und um euch zu zeigen, wie es in meinen Browsern zur Anzeige gebracht wird, hier noch ein Screenshot mit allen 3 Ansichten:
http://www.grelli.name/new/test_w9uT/screens.gif

Wie man sieht, rutscht die Anzeige des Formulars von mal zu mal höher :( Es klappt, wenn ich das Formular mittels CSS um 6px verschiebe (siehe Quellcode, Stil .css_hack), aber natürlich rutscht das Formular dann auch im bisher korrekten Firefox, wodurch dann dort Fehler auftreten.

Gibt es also nun eine Möglichkeit, dass die input-Felder für alle 3 Browser identisch behandelt werden?

Ich hoffe, ihr könnt mir helfen. Ich komme allein einfach nicht mehr voran :(

Mit freundlichem Gruß
Paeda

  1. Hallo Paeda,

    ich arbeite derzeit an einem neuen Projekt, bei dem es auf Pixel genaues Design ankommt. Zur Darstellung werden Tabellen und natürlich CSS verwendet.

    Ich weiß nicht, ob dir das jetzt weiter hilft oder nicht, aber den letzten Satz solltest du überdenken! Ich würde KEINE Tabellen verwenden, sondern alles mit "div"-Tags positionieren. Ich selbst habe die Erfahrung gemacht, dass das nicht nur flexibler ist, sondern auch browserübergreifender.

    Was deine Testseite angeht, so kann es durchaus möglich sein, dass das ganze an den Default-Einstellungen der Browser liegt.

    Ein:

      
    form {  
      margin:0px;  
    }  
    
    

    Kann da manchmal schon weiter helfen.

    Gruß,
    Meise.

    1. Kaum zu glauben, das hat das Problem echt gelöst. Ich dank dir vielmals.

      Mhh, und man sollte aktuell lieber auf große divs & co setzen, statt auf Tabellen? Ich hätte vermutet, dass die Browser da noch viel mehr durcheinander bringen und untereinander anders aussehen lassen. Muss ich mich wohl mal chlau machen.

      Auf jedenfall erst einmal Danke für die promte Hilfe.