Vor einigen Tagen arbeitete ich an der Umsetzung des Screendesigns für eine neues Web-Projekt. Unter anderem sollte das DIV mit den Inhalten am unteren Rand einen (speziellen) Rahmen erhalten. So speziell, das border-bottom:1px solid #AAAAAA; nicht möglich war. Denn der Rahmen sollte – um einen 3D-Effekt zu ermitteln – mit Versatz beginnen.

„Nichts leichter als das!“, dachte ich mir, und machte mich an die Umsetzung. Unterhalb des Content-DIVs wollte ich ein DIV platzieren, das 1px hoch war und mittels margin-left:4px Links um 4px eingerückt war.

Unter Safari und Firefox gab es keine Darstellungsprobleme. Doch als ich mir das Design mit dem MSIE6 anschaute, fiel ich wieder einmal aus allen Wolken: Der graue Balken war nicht etwa ein, sondern etwa 20 Pixel hoch.

Die Lösung? Natürlich wusste Google rat:

If you need to have a div tag smaller than 20px, then you will find it a bit hard to get on IE. Just add “overflow: hidden” to it’s style and you’re good to go.

Quelle: DIV height issue on IE

Wie ich vor kurzem bereits einmal getwittert habe:

Ich hoffe mir nichts sehnlicher, als das Hostel 3 mit Microsoft Internet Explorer-Entwicklern als Backpacker verfilmt wird.

Guet Nacht!