Webseiten-Infos.de

Checkbox-Problem mit IE und Opera

Die Gestaltung von Formularen in den verschiedenen Browsern ist für mich immer noch eine Herausforderung.

Aktuell hatte ich ein Problem mit der Darstellung von Checkboxen im Opera und Internet Explorer 8 (IE8).

Die Vorgängerversionen des Internet Explorers (IE) waren nicht betroffen, da ich für diese Browser eine eigene CSS-Datei mittels bedingtem Kommentar (Conditional Comment) bereitstelle. Dort habe ich für Checkboxen mit den IDs subscribe, linksnewwin und copy folgende CSS-Regel geschrieben:

Auf diese Weise konnte ich vermeiden, dass beim Internet Explorer 5 bis 7 (IE5-7) um die Checkbox herum ein Rahmen dargestellt wird. Ursächlich für den Rahmen um die Checkbox beim Internet Explorer (IE) ist übrigens die Vererbung von border: 1px etc bei input auf die Checkboxen. Die anderen Browser zeigen dagegen keinen Rahmen um die Checkboxen an.

Der Internet Explorer 8 (IE8) soll CSS 2.1 vollständig und richtig umsetzen. Deswegen habe ich die Patch-Datei mit dem bedingten Kommentar (Conditional Comment) auf die früheren Versionen des Internet Explorers (IE) beschränkt gehalten. Für die Darstellung der Icons hinter externen Links, die über zwei Zeilen gehen, sind erfreulicherweise auch tatsächlich die Darstellungsprobleme der Vorgängerversionen verschwunden.

Die Folge ist aber, dass der Internet Explorer 8 (IE8) dafür die Checkbox mit einem Rahmen herum darstellt. Das sieht dann so aus:

Deshalb schrieb ich obige CSS-Regel auch in meine CSS -Datei für alle Browser. Das brachte den gewünschten Erfolg beim Internet Explorer 8 (IE8). Denn nun sah die Checkbox dort wie folgt aus:

Soweit, so gut. Ich hatte aber die Rechnung ohne den Opera gemacht. Dieser Browser verhält sich zumindest in der aktuellen Version 9.6.x anders als Firefox, Safari, Google Chrome etc. Denn border: 0 für die Checkbox sorgt beim Opera dazu, dass ein gesetztes Häckchen fast nicht mehr erkennbar ist. Die Folge: Ein Zugänglichkeitsproblem. So sieht es dann im Opera aus:

Recherchen mit der Suchmaschine meines Vertrauens führten mich dann zu einem Thread im CSS XHTML-Forum. Die Schlussfolgerung daraus: Man muss dem Opera in diesem Fall einen Innenabstand (padding) für die Checkbox geben, damit das Häckchen wieder zu sehen ist. Das habe ich dann mit padding: 7px getan, aber dadurch sah die Checkbox ausschließlich im Opera üderdimensioniert aus. Nämlich so:

Das wollte ich aber meinen Besuchern mit dem Browser Opera nicht zumuten. Also was tun?

Eigentlich ist ja der Internet Explorer 8 (IE8) “schuld”, da er im Gegensatz zu den anderen Browsern (Opera, Firefox, Safari, Google Chrome) einfach diesen unschönen Rahmen um die Checkbox macht. Also beschloss ich alles wieder so zu machen wie vorher. D.h. nur der Internet Explorer 5 bis 7 (IE5-7) bekommen für Checkboxen border: 0 über eine CSS-Datei mittels Conditional Comment und der Internet Explorer 8 (IE8) stellt halt einen hässlichen Rahmen darum dar.

Dafür sehen die Checkboxen im Opera wieder “normal” aus:

Mein Resümee:

• Webseiten sind keine Gemälde.
• Webseiten müssen nicht in allen Browsern gleich aussehen.
• Wenn eine unschöne Darstellung in einem Browser nur auf Kosten der Darstellung in einem anderen Browser behoben werden könnte, dann belasse ich die unschöne Darstellung beim verursachenden Browser.
• Der IE8 bekommt von mir keine extra CSS-Regeln in einer eigenen CSS-Datei mittels Conditional Comment.

Nachtrag vom 20. September 2009:

Mit folgendem Conditional Comment (CC) im Kopfbereich (Header) wäre der Rahmen um die Checkboxen auf Webseiten-Infos.de auch beim Internet Explorer 8 (IE8) nicht mehr zu sehen.

Danke an Fritz Weisshart, der mich darauf hinwies, dass

• border: 0; statt border: none 0; ausreicht und
• bei ihm dieses Checkboxen-Problem mit Opera und Internet Explorer 8 nicht auftritt.

Sein Hinweis regte mich zu diesem ergänzenden Nachtrag an.

Angeregt durch ein Testcase von Fritz Weisshart bin ich der Ursache für das hier beschriebene Checkbox-Problem nachgegangen.

Das Ergebnis: Die Gestaltung von input mit border: 1px etc ist der Auslöser.