nicht angemeldet
Hi Malcolm,
hier also, wie gestern schon angekündigt, der heilige Gral:
Ich beschreibe jetzt Schritt für Schritt (mit jeweiligem Onlinebeispiel) den Weg zur Lösung:
Ich fange damit an, daß ich ein Formular entwickle, das eine valide xhtml 1.0 strict Datei ergibt. Ohne divs und ohne spans bei den Formularbestandteilen. Die einzigen "Besonderheiten" sind, daß 2 Pflichtfelder eine eigene Spanklasse zur späteren farblichen Formatierzung bekommen, der Absendebutton erhält außerdem die Klasse "button". Das ergibt dann Formular 1. Noch völlig _ohne_ CSS.
Ich verändere den Quellcode der Datei jetzt nicht mehr und füge eine seperate CSS-Datei hinzu, bei der ich alle Initialwerte auf 0 stelle, dem div, in dem das Formular ist, eine Breite gebe, den Inputs, der Textarea und der Klasse "button" eine Breite von 100% gebe (Das Formular ist das Elternelement), sie als Block darstellen lasse und ihnen ein border:none auf den Weg mitgebe. Fieldset und legend lasse ich ausblenden und jetzt färbe ich (zunächst mal) das komplette Formular grün und die 3 genannten Elemente orange ein, um eine weitere Analyse leichter zu machen. Es entsteht Formular 2.
Wie man sieht, sind die Inputs, die Textarea und der Button (orange) jetzt wirklich _pixelgenau_ gleich breit. Zunächst mal zumindestens. Denn jetzt kommt das, was ich in meiner Ursprungsfrage beschrieben habe. Ich verpasse den genannten 3 Elementen jetzt ein Border mit 1 Pixel Breite und (zur leichteren Analyse) färbe den blau ein. Es entsteht Formular 3 mit dem von mir beschriebenen Phänomen. Im Opera und im IE machen jetzt die Inputs und die Textarea noch immer 100% der Formularbreite aus, aber der Button ist kürzer. Im Firefox ist es genau umgekehrt. Der Button ist jetzt genau so breit wie die Breite des Formulars, dafür ragen aber alle Inputs und die Textarea rechts etwas aus dem Formular heraus, sind also breiter als die Formularbreite. In allen 3 genannten Browsern ist der Unterschied aber jeweils 2 Pixel.
Hier bin ich jetzt also 3 Tage gescheitert. Und gestern plötzlich fand ich den heiligen Gral, einen Workaround für _alle 3_ genannten Browser.
Mir ist nämlich _noch_ etwas aufgefallen beim Herumspielen: Wenn man jetzt genannten 3 Elementen ein Padding von 1 Pixel auf den Weg mitgibt (es entsteht Formular 4) dann _verstärken_ sich diese Effekte. Die Pixelunterschiede in allen 3 Browsern sind jetzt 4 Pixel. Und verändert man die Paddingangabe auf 3 Pixel (es entsteht Formular 5), dann ist der Unterschied 8 Pixel. Und schon erkennt man die mathematische Logik, die hinter dem Darstellungsfehler steckt. Egal, ob jetzt der Button zu schmal oder die Inputs und Textarea zu breit sind, der Breitenunterschied bei einem Padding von x Pixeln ist _immer_ 2*x+2. Es stellt sich also als nächstes die Frage, wie man diesem Unterschied jetzt entgegenwirken kann. Und jetzt kommt der Clou: Ich verändere den Quellcode und platziere _ein_ div _in_ das Formular. Und zwar kommt in dieses div der komplette Formularinalt _ausser_ dem Button. Dieses div bekommt die Klasse "gleichebreite". Und dieser Klasse weise ich die Eigenschaft padding-right zu. Und zwar genau so viele Pixel, wie wir Größenunterschied haben. In diesem Fall haben wir ein padding von 3 Pixel, ergo einen Unterschied von 8 pixel, ergo bekommt die Klasse "gleichebreite" jetzt ein padding-right:8px und wir bekommen Formular 6.
Und siehe da: In _allen 3_ Browsern sind jetzt die Inputs, die Textarea _und_ der Button _pixelgenau_ gleich breit. Im Firefox füllen jetzt alle 3 Elemente die Breite des Formulars aus, im IE und im Opera sind jetzt alle Elemente _gleich_ schmäler als das Formular. Das stört aber nicht, man kann die Farbe des Formulars ja aufheben und könnte, wenn man das Formular hervorheben will, ja das div nehmen, in dem das Formular liegt.
So, und wenn wir jetzt die häßlichen Farben, mit denen ich analysiert habe, weggeben und das CSS noch erweitern mit Schriftangeben, Angaben für obere und untere Abstände im Formular, Farben, Hintergrund, etc. - dann bekommt man endlich das, was ich von Anfang an wollte. Hier ist das Ergebnis.
Inputs, Textarea _und_ der Button sind _pixelgenau_ _gleich_ breit, und das im IE, im Firefox _und_ im Opera. _Und_ das Ganze ist auch noch flexibel skalierbar, da ich nur realative Längenangaben benutzt habe.
mfG
gooxsy