Samstag, 8. September 2007

doctype strict und die vertical gap

Heute habe ich mir an einem CSS-Layout die Zähne ausgebissen:

Nachdem ich den doctype des HTML-Dokuments von transitional nach strict geschaltet habe, um das nervige Box-Model des Internet Explorers auszutricksen (Tabellen mit width="100%" in einem div sind in Firefox, Safari und Opera so breit wie gewünscht, nur der Internet Explorer zerschiesst das ganze Layout), gab es einen vertikalen Abstand von ca. 4 Pixeln zwischen einzelnen divs wie #header und #content.

Nach stundenlangem Pröbeln und mehreren erfolglosen Google-Suchen zum Thema fand ich endlich den massgeblichen Hinweis:

This time we set the vertical-align property of the object element to bottom. This aligns the bottom of the object with the bottom of the line box, eliminating the small gap we saw earlier.

Quelle: That mysterious gap under images and embedded objects

Ehrenwort? Wirklich? JA! Nachdem ich im Stylesheet

#header img {vertical-align:bottom;}

postuliert hatte, verschwand die nervige Spalte zwischen der Kopfzeile und dem Inhalt der Web-Site. Herueka!

Liked this post? Follow this blog to get more. 

Tags: ,
Labels: Web

Kommentar erfassen