at: Problem selbst gelöst (mit Link zu Beispielseite)

Beitrag lesen

Hallo.

Es ist _nicht_ möglich, ein _valides_ xhtml 1.0 strict Formular _ohne_ divs bzw. _ohne_ spans so mit _validem_ CSS zu formatieren, daß Inputfelder, Textareas und vorallem auch der Absendebutton im IE, im Firefox _und_ im Opera _pixelgenau_ gleich breit sind _und_ dabei _nur_ "em" als Breiten- / Längenangabe verwendet werden darf.

Das stimmt so nicht.

Will man dies erreichen, _muss_ man auf divs bzw. spans zurückgreifen.

Folgende Struktur ist valide und funktioniert:

<form action="" method="post">  
<fieldset>  
<dl>  
<dt><label for="sowohl">Sowohl</label></dt>  
<dd><input id="sowohl" type="text" /></dd>  
<dt><label for="alsauch">Als auch</label></dt>  
<dd><textarea id="alsauch" cols="" rows=""></textarea></dd>  
</dl>  
<button type="submit">Tschüss</button>  
</fieldset>  
</form>

Doch egal ob mit spans oder divs, ich schaffe es selbst _mit_ genannten Erweiterungen des Quellcodes nicht. :-(

  • Wenn du die seitlichen Rahmen um die Eingabe-Elemente weglässt, funktioniert die Formatierung.
  • Wenn du die Rahmenstärke der seitlichen Rahmen um die Eingabe-Elemente in ganzzahligen em-Werten angibst und kumuliert von der Breite des <dd>-Elements abziehst, funktioniert die Formatierung.
  • Wenn du die Rahmenstärke der seitlichen Rahmen um die Eingabe-Elemente in krummen em-Werten bestimmter Größe angibst und kumuliert von der Breite des <dd>-Elements abziehst, funktioniert die Formatierung.
    Dass nicht jeder krumme Wert funktioniert, liegt an der unterschiedlichen Berechnungsweise der Browser. Generell gilt, dass Opera und Safari das Pixel-Equivalent des em-Wertes einmal festlegen, während Firefox bei jedem Vorkommen des Wertes eine neue Berechnung vornimmt. Nun mag man es seltsam finden, dass Firefox immer wieder auf unterschiedliche Ergebnisse trotz gleicher Ausgangswerte kommt, aber dafür ergeben die Werte kumuliert meist eher den Ausgangswert als in Opera oder Safari.
    Ein Beispiel: 1em entspreche hier 14 Pixeln, 0.1em folglich 1,4 Pixeln.
    In Opera und Safari würden 0.1em stets zu 1 Pixel gerundet, wodurch 10 x 0.1em plötzlich nicht mehr 14 Pixel sind, sondern nur noch 10 Pixel.
    In Firefox würde sechs mal 0.1em und vier mal 0.2em herauskommen, womit die 10 x 0.1em in der Summe noch immer 14 Pixeln entsprechen.

Und ich gebs jetzt auf. Sollte jemand eine Lösung wissen, würd es mich glücklich machen, ansonsten hau ich jetzt den Hut drauf.

Verwende einfach durchgängig die richtigen Maßeinheiten und möglichst einfache Werte.
MfG, at