Problem?

Dass der IE6 manchmal ein übler Troll sein kann und sein Nachfolger IE7 ihm in dieser Hinsicht in nichts nachsteht, brauch ich euch ja wohl kaum erzählen (ich habs jetzt natürlich trotzdem gemacht, einfach um ein cooles Intro zu haben ). Jedenfalls bin ich neulich erst auf einen richtig schönen Fix für ein bekanntes Problem bezüglich der Darstellung von Buttons im IE gestoßen.

Kennt ihr das: Ihr habt einen Button oder ein Submit-Input und gebt dem etwas Padding und schon zerschießt es euch im IE das halbe Formular, weil dieser Browser denkt, er müsse den Dicken markieren, indem er den Padding-Wert verdoppelt?

Na dann seit ihr hier goldrichtig!

Das Problem

Wir haben also einen button oder ein input mit dem type="submit" (der Bug betrifft beides gleichermaßen) auf unserer Seite, was der tut ist uns an dieser Stelle reichlich egal.

HTML

1

<button>Button</button>

Normalerweise rate ich immer dazu die Buttons so zu lassen, wie sie sind und so wenig wie möglich am Styling zu ändern. Natürlich kommt es jedoch vor, dass sie dadurch nicht richtig ins “Corporate Design” einer Firma “fitten”. Und da Kunde==König immer wahr ist, muss man hier und da etwas nachhelfen, dass die Buttons auch zum Rest passen. Sehr häufig muss dazu beispielsweise links und rechts das Padding erhöht werden, damit das alles nicht so zusammengeklatscht aussieht.

CSS

1
2
3

button {
	padding:3px 10px;
}

Alles gut denkt man, aber beim X-Browser-Test macht man schnell große Augen: Im IE6 und IE7 sind es nicht nur 10 Pixel links und rechts sondern mindestens doppelt so viele. Hier ein Vergleich:

Die türkisen Linien sind nachträglich eingezeichnet worden..

Die Lösung

In solchen Momenten möchte man am liebsten in die Tastatur beißen oder die Maus durch die Gegend werfen (@Wireless-Maus-User: tut es nicht!). Aber das ist gar nicht nötig, denn die Lösung ist ganz einfach, nahezu trivial.

Alles, was wir tun müssen, ist eine Zeile CSS mehr zu schreiben:

CSS

1
2
3
4

button {
	overflow:visible;
	padding:3px 10px;
}

Durch overflow:visible hört der IE auf, mehr Padding zu vergeben als eigentlich gewollt. Das Schöne daran ist, dass er 100% valide ist und keinerlei Nachteile hat. Der Tag ist damit gerettet und alle können quietschvergnügt nach Hause gehen!

Frontend-Developer 1:0 Internet Explorer

Am neunten Tag möchte ich euch display:inline-block näher bringen. display an sich dürfte ja allen bekannt sein.. es gibt (neben diversen anderen) display:none, display:block, display:inline und eben noch etwas dazwischen – inline-block. Wozu man das braucht und wobei es hilfreich sein kann, verrät euch der heutige Eintrag.

Browserunterstützung

Browser
ab Version	3.0	1.0	3.5	1.0	5.5

inline-block hat eine Weile gebraucht bis es sich flächendeckend bei allen Browsern durchgesetzt hat. Aktuelle Versionen unterstützen es problemlos, nur IE6 und 7 haben eine Einschränkung: Der Wert wird nur auf inline-Elemente korrekt angewendet.

Was ist nun der große Vorteil von Inline-Block-Elementen? Anders als Block-Elemente, welche standardmäßig auf die volle Breite des Elternelements aufgezogen, verhalten sich Inline-Block-Elemente wie Replaced Elements (das img-Tag wäre ein Beispiel dafür). D. h. dass sie in den Textfluss eingebunden bleiben aber dennoch dir Vorteile eines Block-Elements genießen. Dazu zählen unter anderem volle Unterstützung für Margin. Auf normale Inline-Elemente kann man beispielsweise kein Margin anwenden, das hat schlicht keinen Einfluss.

Beispiel

Oftmals wird inline-block eingesetzt, wenn man ein Grid – auf Deutsch “Gitter-Struktur” – aufbauen will, deren Zellen aufgrund ihres Inhalts eine unbekannte Höhe haben können. Nehmen wir an, wie hätten eine Liste mit sechs Elementen, diese wollen wir zu einem 3×2-Grid zusammenfügen.

HTML

1
2
3
4
5
6
7
8

<ul>
	<li>1</li>
	<li>2<br/>+</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
</ul>

Zunächst wollen wir das auf althergebrachte Art und Weise machen, mit float:

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

ul {
	border:1px solid #aaa;
	color:#fff;
	font-size:30px;
	list-style:none;
	overflow:hidden;
	padding:0 10px 10px 0;
	width:180px;
}
li {
	background:#adf;
	float:left;
	margin:10px 0 0 10px;
	padding:10px;
	text-align:center;
	width:30px;
}

Ergebnis

• 1
• 2
  +
• 3
• 4
• 5
• 6

Und da sehen wir auch schon das Problem dieser Lösung: Sobald ein Listenelement höher ist als die anderen, bringt es komplett die Reihenfolge durcheinander. Außerdem muss die Liste gecleared werden, da die Listenelemente floaten. Genau da hilft uns inline-block weiter, aber auch damit muss man zwei Dinge beachten.

1. Dadurch, dass die Elemente nun Inline-Charakter haben, werden Zeilenumbrüche, Einrückungen und Leerzeichen im Code als zu einem Leerzeichen zusammengefasst. Um dem entgegen zu wirken, brauch man nur die li-Tags hintereinander zu schreiben.
2. Ein weiterer Nachteil des Inline-Charakters ist die Tatsache, dass jetzt das Vertical-Alignment greift. Wir müssen also vertical-align:top setzen, damit die Listenelemente nach oben hin bündig zueinander sind.

HTML

1
2
3

<ul>
	<li>1</li><li>2<br/>+</li><li>3</li><li>4</li><li>5</li><li>6</li>
</ul>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

ul {
	border:1px solid #aaa;
	color:#fff;
	font-size:30px;
	list-style:none;
	/*overflow:hidden;*/
	padding:0 10px 10px 0;
	width:180px;
}
li {
	background:#adf;
	/*float:left;*/
	display:inline-block;
	margin:10px 0 0 10px;
	padding:10px;
	text-align:center;
	width:30px;
	vertical-align:top;
}

Ergebnis

• 1
• 2
  +
• 3
• 4
• 5
• 6

Somit hätten wir ein schönes Grid, das so umbricht, wie man es von einem Grid erwartet. To be continued..

Kann IE6 das?

dann sucht man meistens den Fehler bei sich selbst – ist mein XHTML invalide, hab ich Fehler im CSS? Meistens. Manchmal hat man es aber auch mit einem strunzdummen Browser zu tun. So zum Beispiel diese Woche, als auf Arbeit ein kleines Problem auftrat. Hier mal eine Beschreibung der Situation: gefordert war ein Newsticker, der seine Einträge automatisch durchscrollen lässt. Bei den Einträgen handelte es sich um große Hintergrundbilder mit einer darübergelegten halbtransparenten Textbox, in der wiederum ein Link stehen sollte (zur Weiterleitung auf den eigentlichen Newseintrag).

Zum besseren Verständnis mal ein Bild:

Newseinträge mit Hintergrundbild und halbtransparenter Box.

Das Sliden/Scrollen der Einträge war kein Problem, das erledigte ein Javascript. Das große Bild wurde per img-Tag im Newseintrag angegeben, genau wie der Inhalt der Textbox samt Link. Die Textbox hatte als Hintergrundbild die halbtransparente weiße Box und wurde mit position:absolute an die entsprechende Stelle geschoben. Alles funktionierte wunderbar, natürlich fehlten jetzt noch die Anpassungen für den IE6.

Da IE6 keine halbtransparenten PNGs unterstützt, nutzen wir die proprietäre Filtermethode von Microsoft. Dabei wird das Hintergrundbild entfernt und das neugefilterte Bild eingefügt. Der Code sieht folgendermaßen aus:

1
2
3
4

.trans_box {
    background-image:none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src='trans_box.png');
}

Das ganze sollte man über eine extra IE6 CSS-Datei per Conditional Comment einfügen, weil sonst das CSS invalide wird.

Gesagt, getan doch plötzlich das böse Erwachen (im IE6): den Link in der Textbox konnte man zwar noch markieren aber nicht mehr anklicken.

Und ich nur so: “WTF?!”.

Tja.. die Filtermethode hat leider einige Nachteile, wie ich wenig später herausgefunden habe. Was mir schon bekannt war, war dass background-position Anweisungen nicht mehr funktionieren würden ABER außerdem noch folgendes (jetzt kommts):

Links, die sich innerhalb eines absolut-positionierten Elementes befinden, das ein halbtransparentes Hintergrundbild durch die Filtermethode zugewiesen bekommt, sind nicht klickbar.

Jap, so hab ich auch geguckt. Was also tun? Nach ein paar Minuten Googeln die Lösung: Damit die Links wieder funktionieren, muss man zusätzliches Markup einfügen.

1
2
3
4
5

<div class="trans_box">
    <div class="innerwrap">
        <a href="#">Link</a>
    </div>
</div>

Damit können wir jetzt die Änderungen am CSS durchführen.

1
2
3
4
5
6
7
8
9
10
11

.trans_box {
    background:none;
}
.innerwrap {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src='trans_box.png');
    zoom:1;
}
.trans_box a {
    position:relative;
    z-index:1;
}

Der Filter wird von der äußeren Box rein in den innerwrap gezogen und bekommt zoom:1;, damit hasLayout im IE6 gesetzt ist. Die Änderungen am Link sind dazu da, dass dieser stets über den anderen Boxen dargestellt wird.

Ist alles bisschen dreckig aber es funktioniert. Das Extra-Markup ist denke ich verkraftbar, wenn man dafür eine schöne transparente Box im IE6 haben kann.
Viel Spaß damit.

Mehr zum Thema auf Englisch bei satzansatz.de

Go to hell!

Warum fragt ihr? Ganz einfach. Da heut sonst nichts weiter passiert ist, hab ich allen Mut zusammengenommen und beschlossen, dass ich ab sofort den IE6 nicht mehr unterstützten werde. Für meinen Blog heißt das also: keine Anpassungen, keine Tests, keine dummen Hacks.

Ich hab’s einfach satt!

Der IE6 landet in der Tonne. Alle, die das Drecksding von 2001 noch benutzen, sind selber schuld und bekommen jetzt eine Seite mit leicht zerschossenem Layout zu Gesicht. Die Meldung, doch bitte einen anderen Browser zu benutzen, bleibt bestehen und sollte von allen IE6 Nutzern ernst genommen werden.

Viel zulange haben wir Entwickler dafür gesorgt, dass unsere Seiten auch im IE6 gut dargestellt werden. Jetzt ist Schluss damit! “Adopt or die” heißt die Devise also spart euch Rumgeheule in den Kommentaren.

Nochmal zu den Alternativen, die alle schneller, sicherer und generell besser sind als der IE6!

1. Firefox
2. Opera
3. Safari
4. Internet Explorer 8
5. Chrome

Schöne Woche noch