martin-grandrath.de » IE6

-Elemente mit horizontalem Scrollbalken im IE

Martin Grandrath — Wed, 22 Apr 2009 11:37:34 +0000

In meinem aktuellen Template verwende ich für Codeschnipsel

-Elemente mit der Eigenschaft overflow: auto, so dass ein horizontaler Scrollbalken erscheint, wenn der Inhalt breiter als die Box ist. Dies funktioniert (welch Überraschung) nicht im IE6 und nur eingeschränkt im IE7.

Das Problem

IE6 weitet die Box aus und zerstört dadurch das Layout. In meinem Fall rutschte die Seitenleiste rechts unter den eigentlichen Inhalt. IE7 zeigt zwar einen Scrollbalken an, platziert diesen aber innerhalb statt unterhalb der Box, was bei Elementen, die nur eine einzige Zeile beinhalten, dazu führt, dass der Text hinter dem Scrollbalken verschwindet und ein unbedienbarer (weil winziger) vertikaler Balken angezeigt wird.

Die Lösung

Hier ist die Lösung, die ich nach einigem Googlen und Probieren gefunden habe. Dieser Schnipsel sollte in ein separates IE-Stylesheet eingebaut werden, das per conditional comments nur von IE <= 7 geladen wird (bei IE8 tritt das Problem nicht auf).

pre
{
  /* disable vertical scroll bar */
  overflow-y: hidden;

  /* fallback if scripting is disabled */
  padding-bottom: 20px;

  /* add padding if content is wider than the box */
  padding-bottom: expression(this.scrollWidth > this.offsetWidth ? "20px" : "0");

  /* prevent the box from expanding */
  width: 100%;
  }

Falls JavaScript deaktiviert ist, wird das Padding von 20px immer eingefügt. Das führt zwar zu unschönen Abständen, wenn kein Scrollbalken angezeigt wird (d.h. wenn der Inhalt nicht breiter als die Box ist), ist aber auf alle Fälle besser als die ursprüngliche Darstellung.

Linkdump März 2009 – Webdesign

Martin Grandrath — Wed, 01 Apr 2009 13:13:39 +0000

Inspiration

CSS

Resources

Prototyping

Accessibility

Setting up a screen reader test enviroment » iheni :: making the web worldwide

IE6

Verschiedenes

IE6 Frühjahrsputz

Martin Grandrath — Fri, 20 Feb 2009 01:11:25 +0000

Finn.no, Norwegens größte Website für Kleinanzeigen, hat einem der hartnäckigsten Ärgernisse des Webs den Kampf angesagt. Die Rede ist vom Internet Explorer 6, der seit Jahren die Nerven aller um Standards bemühten Webworker aufs Äußerste strapaziert. Die Seite zeigt allen IE6-Nutzern einen grün umrahmten Hinweis an, dass ihr Browser veraltet ist und bietet Links sowohl zum Update auf IE7 als auch zu alternativen Browsern an.

In einem Twitter-Post rief der Webentwickler von Finn.no, Erlend Schei, alle Webmaster großer norwegischer Sites dazu auf, seinem Beispiel zu folgen:

An alle mit Kontrolle über große norwegische Sites: Was haltet ihr von einem Frühjahrsputz, um IE6 los zu werden? Eine Woche Ermutigung auf unseren Homepages?

(Anm: Dies ist eine Übersetzung der englischen Übersetzung)

Nach kurzer Zeit haben sich eine Vielzahl großer und kleinerer Sites an der Aktion beteiligt. In einem eigens eingerichteten Wiki werden die Reaktionen aus dem virtuellen Blätterwald gesammelt. Mittlerweile haben die Wellen u.a. wired und heise erreicht. Der Code-Schnipsel, der den Hinweis auch auf der eigenen Homepage oder Blog einzufügt, ist in 4 8 10 Sprachen verfügbar.

Ich bin sehr gespannt, ob dieser Frühjahrsputz auch in Deutschland Einzug halten wird. Die Zeit des IE6 ist lange abgelaufen.

Update: Auf flickr gibt es eine beeindruckende Screenshot-Sammlung von Seiten, die sich an dieser Aktion beteiligen.

(via thatnorwegianguy.com)