Macs in Media

Bilder-Navigation mit CSS ohne Rahmen

Manchmal möchte man eine Navigation mit Hilfe von CSS realisieren, die allerdings weder auf Text, noch auf background-image setzt, sondern einfach in a-Tags verschachtelte img-Tags beinhaltet. Das stellt sich manchmal allerdings als richtiges Problem dar. Ich habe eben gerade gut fünf Stunden damit verbracht herauszufinden an welcher CSS-Eigenschaft es denn nun liegt, dass ich um jedes a-Tag einen merkwürdigen Rahmen bekomme, den ich auf dem Screenshot explizit blau eingefärbt habe.

Image navigation with CSS

Herausgestellt hat sich, dass das CSS und das XHTML völlig in Ordnung sind. Der Fehler lag daran, dass ich zwischen den einzelnen img-Tags ein Linebreak im Quellcode hatte, so dass sich die Browser gezwungen sahen einen Balken mit der Höhe des Textes zu erstellen.

Alternativ kann man auch einfach die Größe der Schriftart auf 0 setzen, was die Formatierung des Quellcodes zumindest weiterhin schön aussehen lässt und keinen einzeiligen Murks erzeugt.

Update: Eine bessere Lösung mit Hilfe von float:left; stelle ich in einem neueren Beitrag vor.