Hi @all,

auf meinem Mac OS X 10.5 fügt der neue Firefox 3 viel zu große Abstände bei Checkboxen und Radio-Buttons ein. Ich habe es noch nicht unter Windows getestet, aber mir schwant nichts Gutes :-)



Kann bitte jemand bestätigen, dass er dieselben Probleme hat und es nicht nur mein Mac ist?

Vielen Dank
Leo

Hallo Leo,

Mac OS X 10.4.2, FF 3.0.1 - auch so

In Windows XP ist der Abstand etwa im Schnitt zwischen deinen beiden Screenshots, bei Linux Ubuntu leicht grösser. (Jeweils FF3)

Kann man das ev. durch einen expliziten line-height Wert fixieren?

PS:

Für möglichst Platformübergreifend gleiche Darstellung kann auch die Schriftart Einfluss haben. Mein Vorschlag wäre:

Code:

font-family: Verdana, “DejaVu Sans”, Arial, sans-serif;

DejaVu ist in allen gängigen Linux-Distributionen die Entsprechung für Verdana. Verdana ist in Windows 2000/XP/Vista und Mac standardmässig dabei. Arial für urale Windows (NT, 98), und sans-serif für den Rest (BSD, AIX etc.).

Hi acenes,

ich habe mich die letzten 3 Tage mit einer browserübergreifenden CSS-Standardisierung beschäftigt, die auch ziemlich gut funktioniert - bis auf die Sache mit den Abständen in FF3. Das große Problem ist, dass es keinen CSS-Hack speziell für FF3 gibt und es somit absolut unmöglich wird, den Fehler gezielt zu beheben. Damit wird Firefox 3 leider zum nächsten Internet Explorer.

Ich habe auch schon einen Bug-Report erstellt, aber nur die hilfreiche Antwort "I should note that any layout that breaks on this is pretty badly designed" erhalten. Damit ist klar, dass meine unzureichende Qualifikation als Designer Schuld daran hat und nicht etwa die Firefox-Entwickler.

https://bugzilla.mozilla.org/show_bug.cgi?id=448251

Wieso muss es denn ein Browser-spezifischer Hack sein?

Versuch mal folgendes:

Code:

.tl_tbox { line-height:12px; }

Das müsste die Abstände eigentlich in jedem Browser und auf jedem Betriebssystem auf die gleiche Höhe zwingen.

Schön wenn es so wäre, aber das funktioniert leider nicht. Für die Checkboxen habe ich inzwischen einen Workaround für das Backend unter Mac gefunden:

Code:

.tl_checkbox { margin-top:0px; vertical-align:bottom; }
**:first-child+body .tl_checkbox { margin-top:3px; }

Die zweite Anweisung ist ein Safari-Hack, der den fehlenden Abstand wieder ausgleicht. Trotzdem ist das keine zufriedenstellende Lösung, da sie z.B. nicht unter Windows funktioniert.

leo:

Schön wenn es so wäre, aber das funktioniert leider nicht.

Das muss ein generelles Mac Problem sein.

Funktioniert in Windows einwandfrei unter: FF, Opera, Safari und IE

Oh, das ist ein sehr guter Hinweis! Dann lässt es sich wenigstens unter Windows beheben.

Gerade getestet: Funktioniert auch unter Ubuntu mit FF3

Super. Ich habe jetzt den definitiven Fix für den Mac gefunden:

Code:

form {
    line-height:1;
}
input[type="checkbox"] {
    margin-top:0px; vertical-align:bottom;
}
input[type="radio"] {
    margin-top:1px; vertical-align:bottom;
}
**:first-child+body input[type="checkbox"] {
    margin-top:3px;
}
**:first-child+body input[type="radio"] {
    margin-top:2px;
}

Das sorgt dafür, dass sich Firefox und Safari identisch verhalten. Jetzt kümmere ich mich mal um Windows und das Backend (dort funktioniert der Patch nicht so ohne weiteres).

Also ich habe jetzt eine faszinierend einfache Lösung gefunden, die die Ausgabe auf allen Browsern vereinheitlicht - außer auf dem Internet Explorer natürlich, aber das sind wir ja schon gewohnt :-)

Code:

form {
    line-height:1;
}
input, label {
    vertical-align:middle;
}
input[type=radio] {
    vertical-align:bottom;
}
input[type=checkbox] {
    vertical-align:bottom;
}

Funktioniert mit FF2 und FF3 unter Mac und Windows (Linux habe ich nicht).

Nachdem ich deinen ersten Workaround nochmal ansehe denke ich weiss wieso line-height bei Dir zuerst nicht funktioniert hat: Du hast das wohl nur auf die checkbox angewandt, statt auf die ganze Zeile (also inkl. label und dem space zwischen checkbox und label).

Ich denke damit sollte eine saubere Lösung ohne Browser-spezifisches gemurkse möglich sein.

Naja, hauptsache es funktioniert jetzt.

Klasse Arbeit.

...Die Reaktion im Bugreport ist aber mehr als dürftig.

Hi Acenes,

also irgendwie kriege ich Deinen "line-height"-Patch nicht zum laufen. Egal welchem Element ich ihn zuweise (form, tl_box, tl_checkbox_container), die Abstände bleiben.

Hinzu kommt, dass das nur eine Lösung für TYPOlight wäre, weil dort immer ein umschließendes Element vorhanden ist. Mein Ziel ist es aber, eine generelle Vereinheitlichung mittels CSS zu erreichen und das beinhaltet auch Formulare ohne Checkbox-Container.

So oder so, für das Backend habe ich ja nun eine Lösung gefunden.

Grüße
Leo

leo:

tl_box

Das ist ja auch falsch, die entsprechende Klasse heisst tl_tbox.

Egal, die Quintessenz ist dass in solchen Konstellationen natürlich nicht nur die checkbox selber für den Abstand verantwortlich ist, sondern alle Elemente in der entsprechenden Zeile.