Webseiten-Infos.de » Checkbox

Opera: Checkboxen korrekt darstellen

Dieter — Sat, 10 Apr 2010 19:21:22 +0000

Ich hatte in meinen Blogbeiträgen “Checkbox-Problem mit IE und Opera” und “Opera 10.5 mit runden Ecken und Schatteneffekt” bereits über Darstellungsprobleme mit Checkboxen beim Browser Opera berichtet.

Ursächlich für die Darstellungsprobleme beim Opera war die Übernahme von Gestaltungen für input mittels Cascading Style Sheets (CSS) auch bei Checkboxen.

Der Kommentar von Thiemo zeigte mir einen Lösungsweg auf:

Input mit Selektoren auf HTML-Attribute ergänzen, so dass diese CSS-Anweisungen nicht automatisch auf Checkboxen angewandt werden.

Konkret heißt das, dass man für input in der CSS-Datei den jeweiligen Typ (type) definiert, also beispielsweise input[type=text], input[type=submit].

Nachdem ich entsprechende Ergänzungen in der CSS-Datei für Webseiten-Infos.de vorgenommen habe, werden die Checkboxen auch im Opera wieder wie gewollt dargestellt.

Ein herzliches Dankeschön an Thiemo für den Gedankenschubser und die Lösung meines Darstellungsproblems.

Kommentare

29. November 2011, Aktive Eingabefelder visuell hervorheben | Webseiten-Infos.de schreibt: [...] Die Eigenschaft border habe ich nicht generell auf input, sondern lediglich auf input[type=text] angewandt, damit es bei Checkboxen im Opera nicht zu Darstellungsproblemen kommt (siehe hierzu auch meinen Blogbeitrag “Opera: Checkboxen korrekt darstellen“). [...]

Opera 10.5 mit runden Ecken und Schatteneffekt

Dieter — Tue, 02 Mar 2010 20:30:22 +0000

Hurra! Opera 10.5 für Windows ist da (siehe hierzu die Artikel “Opera 10.50 ist fertig – jedenfalls für Windows” bei heise.de und “Opera 10.50 für Windows: Fertige Version ist da” bei golem.de)!

Über die Update-Funktion des Opera konnte ich meinen Browser nicht automatisch aktualisieren, aber über die Opera-Website ist die Version 10.5 zum Herunterladen (Download) verfügbar.

Diese Möglichkeit habe ich gleich genutzt und auf diese Weise meinen Opera für Windows auf die Version 10.5 aktualisiert.

Und siehe da: Endlich sieht man die CSS3-Eigenschaften

Runde Ecken (rounded corners) mit border-radius und
Schatteneffekt (shadow) für Boxen mit box-shadow

auch im Opera.

Nun ist es lediglich noch der Internet Explorer (IE), der selbst in seiner neuesten Version 8 noch nicht diese CSS3-Eigenschaften beherrscht.

Aber: Man soll die Hoffnung nicht ganz aufgeben. Microsoft hat in Aussicht gestellt, im Internet Explorer 9 ebenfalls die Unterstützung von CSS3 einzubauen. Schau mer mal.

Im neuen Opera 10.5 stellte ich aber auch gleich folgende neuen, für mich ungewohnten Verhaltensweisen des Browsers fest:

Bei der Gestaltung von Checkboxen scheint Opera 10.5 im Gegensatz zu anderen Browsern auch CSS-Eigenschaften von input zu übernehmen. Das erschwert zumindest für mich die Gestaltung von Checkboxen.
Die Hintergrundfarbe eines Containers (div) um die Suche überträgt sich nun auch auf ein sich darin befindliches Suchfeld, wenn man für das dortige input nicht eine eigene Hintergrundfarbe definiert.

Das Ganze deutet für mich darauf hin, dass beim Opera 10.5 CSS-Eigenschaften nun (noch) mehr auf Formularelemente vererbt werden.

Anscheinend kommen damit noch mehr Gestaltungsprobleme mit dem Opera auf mich zu. Über ein bereits mit älteren Versionen des Internet Explorers (IE) und Opera bestehendes Gestaltungsproblem hatte ich bereits in meinem Blogbeitrag “Checkbox-Problem mit IE und Opera” berichtet.

Wie findest Du denn den neuen Opera 10.5?

Kommentare

2. März 2010, Thiemo schreibt: Checkboxen gestaltet Opera schon seit längerem mit, wenn man den Selektor mit input { ... } abkürzt, was ich übrigens als korrektes Verhalten werten würde. Ich empfehle statt dessen input[type=text] { ... }. Etwas schade finde ich, dass die 10.5 so überhastet veröffentlicht wurde. Sie hat noch viele kleine Bugs, die aber sicherlich bald behoben werden.
2. März 2010, Dieter schreibt: @Thiemo Herzlichen Dank für den Tipp mit input[type=text]. :hurra: Vielleicht ist das ja die Lösung meines Gestaltungsproblems. Werde ich mal ausprobieren und dann über das Ergebnis berichten. Im Artikel “Opera 10.50 ist fertig – jedenfalls für Windows” von heise.de wird für mich plausibel erscheinend erklärt, warum die Version 10.5 des Opera etwas überhastet veröffentlicht wurde.

Neues Fenster für alle Seiten?

Dieter — Wed, 23 Sep 2009 13:01:15 +0000

Dank einer Erweiterung des JavaScripts von Fritz Weisshart für das Öffnen externer Seiten (Fremde Seiten in neuem Fenster?) wird nun das gesetzte Häckchen, solange der Browser geöffnet ist, auf allen Webseiten von Webseiten-Infos.de beibehalten. Realisiert hat er das – wie von Ute vorgeschlagen – mit einem Cookie.

Aber das ist noch nicht alles!

Zusätzlich schrieb er das JavaScript so, dass

die Checkbox mit der Frage “Fremde Seiten in neuem Fenster?” nicht erscheint, wenn der Besucher der Seite JavaScript deaktiviert hat, und
auch ein Anklicken des Textes zu einem Häckchen in der Checkbox führt.

Zu 1.: Tricky! Das Formular mit der Checkbox und Frage wird nun nicht mehr einfach nur als (X)HTML-Code, sondern als JavaScript-Code eingebunden. Kein JavaScript, kein Formular. So werden Besucher, bei deren Browser JavaScript deaktiviert ist oder deren Ausgabegerät (z.B. Screenreader) kein JavaScript unterstützt, erst gar nicht mit einer Funktion konfrontiert, die in der konkreten Situation nicht verfügbar ist.

Zu 2.: Dadurch, dass die Frage dem Formularelement label zugewiesen ist, funktioniert das Häckchen setzen oder entfernen auch über das Anklicken des Textes.

Tatsächlich konnte ich die Erweiterung des JavaScripts einfach mit Kopieren und Einfügen (Copy & Paste) des Codes aus dem Artikel von Fritz Weisshart realisieren.

Lediglich der Internet Explorer 6 (IE6) scheint mal wieder aus der Reihe zu tanzen. Er behält das Häckchen nicht. Dieser veraltete Browser verhält sich leider nicht standardkonform. Wieder ein Grund mehr, diesen Browser durch einen modernen Browser oder neuere Version des Internet Explorers zu ersetzen.

Ganz herzlichen Dank an Fritz Weisshart für den gelungenen Artikel mit Einbauanleitung.

Leider kann ich nicht an dem A-Tag´09 (Fachkonferenz “Barrierefreies Internet”) teilnehmen und seinen dortigen Vortrag “Böses Javascript – gutes Javascript” hören. Aber erfreulicherweise hat er dazu auf seiner Website den Artikel ““Böses” JavaScript – “Gutes” JavaScript?” freigeschaltet.

Kommentare

23. September 2009, Fritz schreibt: Hallo Dieter, freut mich, dass ich helfen konnte. Deine Aversion gegen den IE6 teile ich sehr wohl. Kann es sein, dass du ihm diesmal Unrecht tust? Er merkt sich das Häkchen nämlich sehr wohl. Zumindest solange du innerhalb des Blogs bleibst. Beim Wechsel zu Startseite & Co. klappt das hier leider nicht. Aber daran ist Der IE unschuldig. ;-)
23. September 2009, Fritz schreibt: Hallo Dieter, das obige Problem kannst eventuell per JavaScript lösen. Bitte ändere das Script, von dem das cookie gesetzt wird, wie folgt: document.cookie='extern=externoeffnen; path =/';
24. September 2009, Dieter schreibt: Hallo Fritz, da ich keine Originalinstallation des IE6 habe, verwende ich verschiedene Software-Pakete, die mehrere IE-Versionen zur Verfügung stellen (siehe hierzu den Blogbeitrag "Webdesign mit verschiedenen IE-Versionen testen"). Das Problem tritt weiterhin vollständig mit dem IE6 von Multiple IE auf. Nachdem ich Deinen Änderungsvorschlag befolgt habe, bin ich auf die Idee gekommen, die Funktionsfähigkeit des Skripts auch mit dem IE6 des IETesters und der Internet Explorer Collection zu testen. Dort klappt es wunderbar. Das Problem liegt anscheinend bei dem Software-Paket Multiple IE. Ich habe also in der Tat diesmal dem IE6 unrecht getan. :ups: Ganz herzlichen Dank für das Überprüfen und die Codekorrektur. :hurra: Ich streiche gleich den Absatz zum IE6 im Blogbeitrag.
2. Oktober 2009, SEOux Indianer schreibt: Hi, die Blog Startseite /blog/ ist komplett auf noindex und nofollow gestellt. Absicht?
2. Oktober 2009, Dieter schreibt: Hi SEOux Indianer, gut beobachtet. Und um Deine Frage zu beantworten: Ja, um doppelten Inhalt (double content) zu vermeiden. Die Seite /blog/ zeigt den neuesten Blogbeitrag als Archivseite, die allerdings schon den Volltext einschließlich Kommentarfeld anzeigt. Ein Mausklick auf den Titel des jeweiligen Blogbeitrags zeigt dann den (echten) Blogbeitrag ohne noindex und nofollow.
13. Oktober 2009, Thomas Scholz schreibt: Wie kommst du darauf, daß jemand, der einen Screenreader benutzt, auch Javascript abschaltet? Beides hat nichts miteinander zu tun. Der Screenreader liest einfach vor, was der Browser rendert. Sinnvoll ist diese Einstellung auch für sehende Nutzer nur dann, wenn du Links auf andere Webseiten auch irgendwie kennzeichnest. Sonst verringerst du die Vorhersagbarkeit ohne Not.
13. Oktober 2009, Dieter schreibt: @Thomas Weiß nicht mehr wie ich auf den unzutreffenden Gedanken gekommen bin, dass jemand, der einen Screenreader benutzt, kein JavaScript hat. Habe es gleichwohl mal mit dem Firefox Addon FireVox getestet und dann die entsprechende Textpassage gestrichen. Die Links im Text auf andere Webseiten sind im Text mit den Icons Erdkugel, W für Wikipedia bzw. einem pdf-Icon gekennzeichnet. Besuchte Links erhalten dagegen - unabhängig davon ob sie intern oder extern sind - einen Haken. Damit sind bereits besuchte Links leider nicht mehr eindeutig unterscheidbar. Damit habe ich für bereits besuchte Links, das von Dir beschriebene Problem der Vorhersagbarkeit. Das steht in Konflikt mit meiner Zielsetzung durch ein anderes Icon für besuchte Links diese nicht nur farblich von nicht besuchten Links für den Besucher unterscheidbar zu machen. Mal schauen, ob ich verschiedene Icons für besuchte Links von externen und internen Seiten verwenden kann oder sonst wie löse. Danke für Deine beiden berechtigten Hinweise. :) Dein Kommentar war wieder äußerst hilfreich. :freu2:
13. Oktober 2009, Thomas Scholz schreibt: Ich halte die Unterscheidung zwischen »externen« und »internen« Links generell für fragwürdig; deine Probleme beim Kennzeichnen unterstreichen das nur. In den Kommentaren beispielsweise, die ich beim Schreiben des letzten Beitrags vor Augen hatte, triffst du sie ja nicht. Für den Leser ist dieser Unterschied unwichtig: Er interessiert sich für den Inhalt, nicht für den Standort. Oh, und ich habe die Kuller nicht als Weltkugel identifiziert.
13. Oktober 2009, Dieter schreibt: @Thomas Die Unterscheidung interne und externe Links ist in der Tat fragwürdig. Sie resultiert aus der ebenfalls fragwürdigen Alternative Links in einem externen Fenster zu öffnen. Es ist aber nur ein Alternativangebot, das Gewohnheiten von Benutzern wie meiner Freundin berücksichtigt. Sie ist es gewohnt, dass sich externe Links in einem neuen Fenster öffnen. Wie das mit der Maus zu bewerkstelligen ist, hat sie genauso wie ich nicht parat. Standardmäßig sieht das für die Kennzeichnung von Links hier eingesetzte WordPress-Plugin Link Indication die Einbeziehung von Kommentaren übrigens vor. Ich habe diese Einstellung lediglich geändert, weil ich es nicht hinbekam die Kommentar-Permalinks etc davon auszunehmen. Da werde ich mich wohl noch einmal mit beschäftigen müssen. Auch wenn ich Deine Auffassung teile, dass der Leser sich für den Inhalt und nicht den Standort interessiert, so kann der Standort gleichwohl wichtig und bedeutend sein (vertrauenswürdig?). Die Weltkugel ist doch soooo schön. Wie konntest Du die nicht erkennen? :roll:
13. Oktober 2009, Fritz schreibt: @Dieter und @Thomas Ich halte die Unterscheidung zwischen »externen« und »internen« Links gar nicht für fragwürdig. Es gibt Leute, die interessieren sich sehr wohl dafür, ob ein Link auf eine dritte (fremde) Site führt, oder innerhalb der gerade besuchten Site bleibt. Mit neuem Fenster hat das erst mal nichts zu tun. Und wem das egal ist, der kann ja einfach das entsprechende Kennzeichen ignorieren - oder erst gar nicht nachfragen, was die schöne Weltkugel bedeutet. ;-)
13. Oktober 2009, Thomas Scholz schreibt: Ich habe jetzt eine Weile herumgesucht und auf Twitter nachgefragt, konnte aber keine einzige Studie dazu finden, ob die Leser sich für den Unterschied interessieren. Offenbar hält niemand die Frage für wichtig genug. Hinzu kommt, daß diese Unterscheidung oft gar nicht so genau zu treffen ist: Wenn ich von meinem Hauptblog zu meinem Operablog linke, dann ist dieser Link »interner« als der von meinem Githubprofil zu einem anderen. Im ersten Fall liegen nämlich die Texte und das Aussehen größtenteils in meiner Hand, im zweiten nicht. Wenn der Grad meiner Kontrolle nicht das Kriterium für die »Externalität« ist – welcher dann? Die Domain kann es nicht sein; das illustriert der zweite Fall. Und wenn ich schon an so einfachen Punkten ins Zweifeln gerate – wie will dann ein Leser, der weder meine Schlußfolgerungen kennt, noch zwingend die Bilder sieht, erraten, welcher Link »nach außen« führt und welcher nicht? Mein Verdacht: Diese Differenz existiert eigentlich nicht, und sie ist auch nicht der wirkliche Grund für die Kennzeichnung. Das eigentliche Motiv für die technische Implementation ist der Spieltrieb, das berühmte »weil es geht«. ;) Über die Weltkugel habe ich auch ein Weilchen nachgedacht. Ich erkenne eine Weltkugel an Afrika. Wenn der Kontinent deutlich zu sehen ist, dann vermute ich eine Weltkarte, sonst nicht. Zwar sind auch Weltkugeln möglich, auf denen Afrika nicht oder »verzerrt« zu sehen ist, aber die entsprechen eben nicht meiner Sehgewohnheit. Ich finde dieses Symbol auch ein bißchen … schräg. Ehe du mich darauf hingewiesen hast, wußte ich nicht, daß deine Website auf einem anderen Planeten gehostet wird. ;) Ein Pfeil in eine Box hinein und einer aus ihr heraus bildeten das, was du im Sinn hast, vermutlich besser ab. Zumindest solltest du das Symbol, für das du dich entscheidest, neben die Checkbox mit dem Text setzen, damit man sich das Raten erspart. Und da ich einmal im Pedantenmodus bin (ich hör gleich auf ;)): Was machen denn Besucher, die nicht den IE 6 benutzen? Die wollen sicher kein neues Fenster, sondern schlimmstenfalls einen neuen Tab. Dein Text behauptet aber, daß du diesen Wunsch nicht respektieren wirst. Daß du das nicht kannst, weiß der normale Leser ja nicht. Wo ist denn hier die Vorschau? Hm …
13. Oktober 2009, Dieter schreibt: @Fritz
Ich halte die Unterscheidung zwischen »externen« und »internen« Links gar nicht für fragwürdig. Es gibt Leute, die interessieren sich sehr wohl dafür, ob ein Link auf eine dritte (fremde) Site führt, oder innerhalb der gerade besuchten Site bleibt.
Mit dem Beispiel Vertrauenswürdigkeit am Ende meines Kommentars hatte ich das "fragwürdig" insoweit eingeschränkt. ;-)
Und wem das egal ist, der kann ja einfach das entsprechende Kennzeichen ignorieren
Das hatte ich mit dem Ausdruck "Alternativangebot" zum Ausdruck bringen wollen. Danke für die Klarstellung.
– oder erst gar nicht nachfragen, was die schöne Weltkugel bedeutet. ;-)
Anscheinend konnte Thomas die schöne Weltkugel nicht ohne Hinweis als solche ausmachen. Darüber hinaus teile ich seine Auffassung, dass für externe Links ein wegführender Pfeil besser wäre. Das Symbol dürfte dafür eher geläufig sein und sich damit als Quasi-Standard etablieren. Ich beabsichtige deshalb die schöne Weltkugel durch einen wegführenden Pfeil zu ersetzen.
13. Oktober 2009, Dieter schreibt: @Thomas Die Unterscheidung zwischen internen und externen Links ist zumindest technisch möglich und kann neben dem Seitenbetreiber auch Besucher interessieren. Bloß, weil es keine Studien darüber zu geben scheint, muss die unterschiedliche Kennzeichnung von internen und externen Links nicht überflüssig sein. So gibt es durchaus Nutzer, die es gewohnt sind und deshalb auch erwarten, dass sich externe Links in neuen Fenstern oder Tabs ;-) öffnen. Das mag nicht dem XHTML-Standard strict entsprechen, der target="_blank" nicht erlaubt, ändert aber nichts an durch Erfahrung geprägte Erwartungshaltungen. Für einen solchen Fall halte ich das Angebot der Checkbox "Fremde Seite in neuem Fenster" und die optische Unterscheidung von internen und externen Links für sinnvoll. Über einen Spieltrieb verfüge ich definitiv. Das hast Du gut beobachtet. Hier setze ich ihn jedoch nicht als Selbstzweck ein, sondern für den o.g. Zweck. In der Tat sollte ich aber nicht den Besuchern verraten, dass diese Website auf einem anderen Planeten gehostet ist. ;-) Ich beabsichtige das deshalb möglichst bald zu verschleiern und stattdessen den Quasi-Standard eines herauszeigenden Pfeils (externe Links) oder eines in einer Box befindlichen Pfeils (interne Links) zu verwenden. ;-) Dein Vorschlag, das Icon ebenfalls neben der Checkbox anzuzeigen, ist genial. Und auch Dein Hinweis "Fenster oder Tab" ist ausgesprochen hilfreich. :freu2: Kommen wir zu Deiner Frage:
Wo ist denn hier die Vorschau? Hm …
Meinst Du damit eine Vorschaufunktion für Kommentare? So eine schöne wie auf Deiner Seite? Dann verrate mir bitte wie Du sie realisiert hast. Hast Du ein Plugin eingesetzt? Falls ja, welches? Dann prüfe ich gerne dessen Einsatz auch hier. :-) PS: Ich liebe Deinen Pedantenmodus. Keine Sorge, ich bin nicht masochistisch veranlagt. Du bringst da einfach die Probleme so schön auf den Punkt. ;-)
13. Oktober 2009, Seouxindianer schreibt: Oh, das erklärt das noindex. Verwehrst Du Suchmaschinen aber nicht auch den Zugriff auf die einzelnen Artikel, wenn Du für die gesamte page nofollow verwendest?
13. Oktober 2009, Thomas Scholz schreibt: @Dieter: Wie sähe in den beiden von mir genannten Fällen die Unterscheidung zwischen »intern« und »extern« aus? Das Problem kann man sogar auf nur einen Fall reduzieren: Wenn ich in meinem Operablog Links setze. Sind Links auf meine anderen Websites »intern« und solche auf andere Operablogs »extern«? Oder umgekehrt?
Bloß, weil es keine Studien darüber zu geben scheint, muss die unterschiedliche Kennzeichnung von internen und externen Links nicht überflüssig sein.
Das habe ich auch nicht geschrieben. Ich habe das nur als weiteres Indiz dafür genommen, daß die Frage danach irrelevant ist. Bei der angeblichen »Nutzergewohnheit« möchte ich dir entschieden widersprechen, bis du mir deine Vermutung mit Fakten unterlegst. Ich erlebe das anders. Google, Yahoo, Wikipedia – keine dieser Websites versucht, Links auf andere in der Voreinstellung in einer separaten Instanz zu öffnen. Das ist üblich. Ausnahmen sind Webapplikationen, deren Bedienung an eine Session gebunden ist: Twitter oder Gmail etwa. Wenn man verallgemeinern möchte, dann eher so: Alle mit target=_blank versehenen Links führen auf Websites, auf die der »Aufreißer« glücklicherweise keinen Einfluß hat. Daraus folgt aber nicht, daß Links auf andere Websites üblicherweise in einem neuen Fenster geöffnet werden. Nebenbei bemerkt: Ich finde es ein bißchen kurios, daß du plötzlich »das Übliche« als Argument für eine gestalterische Entscheidung heranziehst. Neben dem logischen Problem (»üblich« ist nicht gleich »gut«) wendest du dich doch mit deiner übergroßen Schrift genau gegen eine Konvention. Hier sähe ich meine voreingestellten 16px lieber als deine 19px. Das finde ich viel wichtiger als die Fensterfrage. ;) Jetzt hast du auf jeder einzelnen Seite eine Option, das 90% deiner Leser nicht brauchen … Meine Kommentarvorschau arbeitet mit dem Plugin »Live Comment Preview«. Ich habe darin nur überflüssiges Markup und die flackernde Gravatarvorschau entfernt; das kannst du sicher leicht selber nachvollziehen.
13. Oktober 2009, Thomas Scholz schreibt: Ich finde es übrigens sehr verwirrend, daß du das Element CODE unangekündigt in PRE verwandelst – selbst wenn es mitten im Satz steht und keinen Zeilenumbruch enthält.
14. Oktober 2009, Dieter schreibt: @Seouxindianer Ja, ich könnte und sollte wohl besser die Seiten von nofollow auf follow umstellen. Allerdings gibt es bei mir keine Crawling-Probleme deshalb, weil ich auf jeder Seite ganz oben auch den Link zur Sitemap habe. Und die Sitemap verlinkt auf die Seiten mit den "echten" Blogbeiträgen. :-) Jetzt habe ich mir gerade irgendwie das Template für die Blogseite "zerschossen". Muss ich erst einmal das Problem beheben.
14. Oktober 2009, Dieter schreibt: Blogseite funktioniert wieder und nun kann ich mich den offenen Kommentaren widmen. ;-) Das Problem mit der "statischen" Seite Blog war kurios. Sie ließ zwar das Template blog.php auswählen und speichern, aber verwendete es nicht mehr. :schockiert: :confused: :irre: Vielmehr wurde stattdessen das Standardtemplate (wahrscheinlich page.php) abgearbeitet. Wie auch immer. Nachdem ich die Template-Datei blog.php in blogliste.php umbenannt hatte und auch den Template Name entsprechend geändert, ging es wieder problemlos. :hurra:
14. Oktober 2009, Dieter schreibt: @toscho Ich fange mal von hinten an. ;-) Bin schwer erkältet und gehe gleich wieder ins Bett. Zudem kann ich dazu kurz und schnell antworten. Wo wandele ich denn ein Element code in pre um? Das target=_blank in Deinem Kommentar? Dann ist das Plugin CodeColorer wohl der Schuldige. Hast Du eine bessere Alternative als Vorschlag? Danke für den Hinweis auf das Plugin Live Comment Preview. Ich habe es hier eingebaut. Lediglich der große Textabstand zum Rand nach oben und links stört mich noch. Hast Du einen Hinweis für mich, wo ich den verringern kann? Zum eigentlichen Thema komme ich dann morgen. Gut Nächtle.
14. Oktober 2009, Thomas Scholz schreibt: Ich benutze HTML Purified; das kann zwischen code und pre unterscheiden. Die Ausgabe der Kommentarvorschau kannst du mit CSS beeinflussen. Wie das bei dir im einzelnen auszusehen hat, kann ich jetzt nicht sagen. Bei mir haben sich übrigens Leser beschwert, die eine langsame Internetverbindung haben: Der Gravatar wurde immer wieder neu geladen, deshalb habe ich das entfernt. Wenn du daran herumschraubst, dann schreib dick »Vorschau« über die Vorschau. Sicher ist sicher. :) Aber laß dir Zeit; kurier dich erstmal aus.
15. Oktober 2009, Dieter schreibt: @Thomas Fange langsam an und habe erst einmal die Kommentarvorschau eingerichtet und einen Blogbeitrag dazu geschrieben. Vielen Dank für den Tipp! In die Kommentarvorschau habe ich einfach Kommentarvorschau geschrieben. Ich hoffe, das reicht. Auf das eigentliche Thema komme ich noch zurück. ;-)
18. Oktober 2009, Dieter schreibt: @Thomas Wieder von hinten nach vorne. ;-) HTML Purified scheint eine interessante Alternative auch unter sicherheitstechnischen Gesichtspunkten zu sein. Bis auf die automatische Veränderungen von pre zu code bin ich mit Codecolorer sehr zufrieden. Deshalb gedenke ich nur umzusteigen, wenn es Kompatibilitätsprobleme mit Codecolorer geben sollte. Zur Schriftgröße hier: Ich wusste nicht, dass ich hier 19 px einsetze. Ich verwende grundsätzlich em und %. ;-) Ja, die Schriftgröße beim Text liegt über dem Durchschnitt. Insbesondere folgende Gründe waren für mich ausschlaggebend: - Ich wollte die Bedeutung des eigentlichen Textes im Vergleich zu den Inhalten der Sidebar unterstreichen. Deshalb ist die Schrift in der Sidebar kleiner als im Text. - Die Laufweite des Fließtextes sollte eine gute Lesbarkeit ermöglichen und deshalb weniger als 80 Zeichen pro Zeile betragen. - Es gibt leider immer noch den benutzerunfreundlichen Trend zu kleiner Schrift. Es gibt eine beachtliche Zahl an Internetnutzern mit Sehschwäche, für die eine größere Schrift leichter zu lesen ist. Nur so am Rande: Ich habe leider auch schon eine Altersfehlsichtigkeit. Ist denn die Schriftgröße für Dich nur unüblich oder empfindest Du sie als störend? Würde mich mal interessieren. Bezüglich der Weltkugel hast Du mich überzeugt. Ihr ist der avisierte Pfeil gefolgt. An der Überarbeitung der Icons für die Sprite-Datei und den Einbau in den Kommentaren arbeite ich noch; steht aber auf meiner ToDo-Liste weit oben. Fritz und ich haben auf unseren Seiten übrigens Deine Idee mit dem Icon im Text bei der Checkbox aufgegriffen. Danke dafür! Im Übrigen glaube ich nicht, dass überhaupt 10% der Besucher die Checkbox nutzen. Gleichwohl werde ich mal dieses Alternativangebot belassen. Mal schauen, vielleicht mache ich mal meine erste Umfrage zu diesem Thema. Noch auf einen früheren Vorschlag von Dir zur Verringerung des Grundrauschens: Ich halte ein gewisses Maß an Redundanz um Maus- und Tastaturbenutzer zu bedienen hin und wieder für vertretbar. Deshalb habe ich auch die internen Links "nach unten" und "nach oben" bisher belassen. Die Schlagwortwolke habe ich aber aus der mittleren Subcolumn herausgenommen und lediglich noch mit einem Link im Fußbereich (Footer) bedacht. Damit habe ich zumindest auf der Startseite nun wieder unter 100 Links. Das soll wohl auch unter SEO-Gesichtspunkten sinnvoll sein.
18. Oktober 2009, Thomas Scholz schreibt: Ja, mich stört die Schrift. Sie ist bei mir auch größer als bei dir, weil du das Problem der Mindestschriftgröße vergessen hast und schon für body auf 75% gehst, die mein Browser gar nicht erreichen darf. Ich brauche meistens genau 16px. Ich bin etwas kurzsichtig, meine Brille hat also verkleinernde Zerstreuungslinsen. Deshalb ist meine Mindestschriftgröße 14px. Und ich lese normalerweise sehr schnell, indem ich mehrere Zeilen auf einmal erfasse, deshalb sollte die Schrift nicht übermäßig groß sein. Aber hier bekomme ich die falsche Größe, gerade weil ich mir die richtige eingestellt habe.
Mal schauen, vielleicht mache ich mal meine erste Umfrage zu diesem Thema.
Wozu? Das ist sehr viel unzuverlässiger als einfach die Cookies zu zählen.
18. Oktober 2009, Dieter schreibt: @Thomas Danke für Deine ausführliche Antwort und den Screenshot. Das wusste ich nicht, dass es auf Webseiten-Infos.de das Problem mit der Mindestschriftgröße gibt. Umstellung auf px kommt wohl wegen der Probleme beim IE6 nicht in Frage. Bisher kommen immer noch (!) etwa 20% der Besucher auf Webseiten-Infos.de mit diesem Browser vorbei. Übrigens immer noch über 50% der IE-Besucher. :irre: Verstehe ich Deinen Artikel richtig, dass die zweite Lösungsmöglichkeit mit 100.01% als Standard-Schriftgröße und dann davon jeweils em das Mindestschriftgrößen-Problem mildern oder gar lösen würde? :hilfe: Falls ja, würde ich mal versuchen das entsprechend zu ändern. Bezüglich der Checkbox für externe Links hatte ich an Cookie zählen nicht gedacht, weil ich bisher nicht wusste, dass ich das machen könnte. Stellt sich für mich aber immer noch die Frage wie? Dabei besteht die Restriktion, dass ich nicht programmieren kann. :sad2: Dein Screenshot hat mir übrigens mal wieder gezeigt, dass der Opera text-align:bottom für die Grafik völlig anders darstellt. Habe nun mit margin-bottom:-2px eine hoffentlich bessere Lösung. ;-)
18. Oktober 2009, Thomas Scholz schreibt: Naja, Cookies könntest du einfach zählen, indem du prüfst, ob das Cookie »extern« existiert. Dann setzt du in einer Textdatei einen Wert eins hoch. Sonst setzt du einen zweiten Wert eins hoch. Nach einer Weile siehst du mal rein und vergleichst die beiden Werte. Vorher solltest du aber noch die Funktion so reparieren, daß man beim Herausnehmen des Hakens das Cookie auch wieder verliert. Im Moment kann ich den Haken nur auf einer Seite entfernen; auf der nächsten oder beim reload ist er wieder drin, obwohl ich das ausdrücklich nicht will. Das verdirbt die Statistik natürlich. ;) Und ja, wenn du bei body nicht unter 100% gehst, vermeidest du das Problem. Bedenke auch, daß manche Leute Mindest- und Normalschriftgröße auf den selben Wert setzen. Sobald man irgendwo unter 100% geht, verdoppelt sich der Testaufwand. Bei Inlinegrafiken habe ich mit prozentualem vertical-align bisher die besten Ergebnisse erzielt. Das ist aber immer knifflig.
19. Oktober 2009, Dieter schreibt: @Thomas Naja, einfach ist das Cookies zählen also ohne Programmierkenntnisse anscheinend nicht. Den Fehler mit dem wieder gesetzten Haken konnte ich reproduzieren. Werde mal Fritz darauf aufmerksam machen, da es auch bei seiner Website auftritt. Er hat das JavaScript ergänzt. Ich hoffe, er kann den Fehler fixen. Die Schriftgrößenanpassung ist auf meiner ToDo-Liste mit hoher Priorität. Allerdings bin ich die nächsten Tage auf Reisen und habe danach Besuch, so dass es leider noch ein paar Wochen dauern wird. Bitte um Nachsicht. Danke für den Tipp mit prozentualem vertikal-align. Kannte ich noch nicht. Werde ich mal bei Gelegenheit ausprobieren oder testen.
20. Oktober 2009, Fritz schreibt: @Dieter > Ich hoffe, er kann den Fehler fixen. Ist gefixt. Danke für den Bug
20. Oktober 2009, Dieter schreibt: @Fritz
Ist gefixt. Danke für den Bug
Herzlichen Dank für das Fixen. Werde es aber erst nach Rückkehr aus Basel testen können. Gebe dann Rückmeldung
23. Oktober 2009, Dieter schreibt: @Fritz Habe Deinen Fix auch auf Webseiten-Infos.de übernommen. Problem scheint behoben zu sein. Herzlichen Dank! :hurra:
5. November 2009, Dieter schreibt: Entsprechend dem hilfreichen Hnweis von toscho hat body seit heute nun "fontsize: 100.01%". Ich hoffe, damit zumindest das Problem mit einer vom Nutzer gewählten Mindestschriftgröße bei seinem Browser in den Griff bekommen zu haben. Für Hinweise, wo mir das noch nicht gelungen ist, bin ich jederzeit dankbar. Gerne können mir dazu benutzereigene Stylesheets für diverse Browser zum Selbsttesten zugemailt werden. Mit benutzereigenen Stylesheets habe ich zwar noch keine Erfahrungen, aber das würde ich gerne ändern.

Checkbox-Problem mit IE und Opera

Dieter — Sat, 22 Aug 2009 19:53:28 +0000

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:

1
2
3
4
5
6
7

#subscribe,
#linksnewwin,
#copy {
border: 0;
padding: 0;
background-color: transparent;
}

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.

1
2
3
4
5
6
7
8

Webseiten-Infos.de » Checkbox

Opera: Checkboxen korrekt darstellen

Kommentare

Ähnliche Beiträge

Opera 10.5 mit runden Ecken und Schatteneffekt

Kommentare

Ähnliche Beiträge

Neues Fenster für alle Seiten?

Kommentare

Ähnliche Beiträge

Checkbox-Problem mit IE und Opera