PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Probleme mit Formularen und IE7/8



Mr. Magpie
22.10.2012, 15:55
Mir ist aufgefallen, dass die Breitenangabe (70%) für Input-Felder bei .ym-columnar-Formularen beim IE7 und IE8 nicht aus der entsprechenden gray-theme.css verwendet wird, sondern diejenige aus der base.css (67,2%).
Da fragt es sich, ob nicht noch weitere Angaben nicht übernommen werden.

Aufgefallen ist es mir, als ich zwei Inputfelder nebeneinander legen wollte, so wie in meinem Testcase, den ich unter http://www.wielandshoehe.de/_YAML4_Testcase/demos/flexible-columns.html erstellt habe, bei den Federn Straße / Hausnummer.

Bei den Feldern PLZ / Ort habe ich versucht, mittels ym-grid 2 Felder nebeneinander zu legen. Ebenfalls mit mäßigem Erfolg bei IE7 und IE8. Hat das Problem schon jemand gelöst?

djesse
22.10.2012, 16:55
Hallo,


Mir ist aufgefallen, dass die Breitenangabe (70%) für Input-Felder bei .ym-columnar-Formularen beim IE7 und IE8 nicht aus der entsprechenden gray-theme.css verwendet wird, sondern diejenige aus der base.css (67,2%). Da fragt es sich, ob nicht noch weitere Angaben nicht übernommen werden.

Um zu verstehen, warum in diesem Fall die Werte aus der base.css Gültigkeit haben, musst Du Dir die Code-Kommentare in der "gray-theme.css" durchlesen. Das Formulartheme ist auf aktuelle Browser ausgelegt und schaltet zunächst auf das CSS3-Box-Modell "box-sizing:border-box" um, und definiert anschließend saubere Prozentbreiten (wie die 70% bei columnar-Darstellung). Dieser Weg sorgt für optisch perfekte Formularelemente, weil in flexiblen Formularen z.B. Input- und Select-Elemente immer gleich groß sind. Mit dem alten CSS2-Box-Modell ist das nicht möglich, da der Auswahl-Button eines Selektfeldes die Gesamtbreite verändert, ebenso wie die Paddings der Elemente.

Um das Überschreiben der Breitenvorgaben auf moderne Browser zu beschränken, welche das neue Box-Modell korrekt interpretieren, liegen die Breitendefinitionen für die Formularelemente in einer Media-Query am Anfang der "gray-theme.css". Und damit wären wir bei den alten IEs. Alle Browser, die nicht mit Media-Queries umgehen können, rendern die Formularelemente deshalb als Fallback mit dem CSS2-Boxmodell und den Standardbreiten aus der base.css.


Aufgefallen ist es mir, als ich zwei Inputfelder nebeneinander legen wollte, so wie in meinem Testcase, den ich unter http://www.wielandshoehe.de/_YAML4_T...e-columns.html (http://www.wielandshoehe.de/_YAML4_Testcase/demos/flexible-columns.html) erstellt habe, bei den Federn Straße / Hausnummer.

Bei den Feldern PLZ / Ort habe ich versucht, mittels ym-grid 2 Felder nebeneinander zu legen. Ebenfalls mit mäßigem Erfolg bei IE7 und IE8. Hat das Problem schon jemand gelöst?

Lösen kannst Du dieses kleine Problem eigentlich nur, in dem Du die Breiten für die alten IEs manuell so anpasst, dass es zu keinem ungewollten Umbruch mehr kommt. Das lässt sich leider nicht vermeiden. Es ist leider mit dem CSS2-Box-Modell nicht möglich für flexible (%) Formularelemente immer gültige Korrekturwerte zu errechnen und dem IE zu geben. Das liegt daran, dass das Padding im Regelfall in PX-Werten definiert werden muss, während die Breite in Prozent definiert wird. Für übliche Größen findest Du deshalb in der base.css den Fallback von 67,2% statt den 70%. Werden die Formularfelder deutlich kleiner in ihrer Gesamtbreite, so wird der "Fehler" durch die Paddings, den es zu berücksichtigen gilt, größer. Du musst die Gesamtbreite für die alten IEs also noch etwas weiter reduzieren, bis die Umbrüche verschwinden.

Ich hoffe, die Erläuterung ist halbwegs nachvollziehbar.

Dirk

Mr. Magpie
22.10.2012, 18:31
Vielen Dank für deine Hinweise. Sie sind für mich sogar sehr gut nachvollziehbar. Ich hätte mir die die gray-theme.css vielleicht doch noch einmal etwas gründlicher ansehen müssen... :)