Erstelle eine Zeile mit Links direkt am oberen Bildschirmrand.

Problem:
Der Browser setzt die Linkzeile nicht bündig an den oberen Seitenrand.

Es wird immer ein zwar kleiner, aber eben doch merklicher Abstand zum oberen Bildschirmrand eingehalten.

Lösung 1 (Dirty-Fix):  Kapitulieren und das Banner tiefer setzen.

Lösung 2 (Dirty-Fix):  Kapitulieren  und das CustomNavigationsModul im Headerbereich mit einem negativen Wert nach oben verschieben

Lösung 3: Ursache verstehen und beheben.

Die Lösung des Problems ist einfach, aber es ist schwierig, die Ursache dafür zu erkennen. Man kann lange nach “margin” oder “padding” Einstellungen von ID’s und Selektorklassen suchen und wird nicht fündig werden.

Um es kurz zu machen:

Es liegt nicht an falschen CSS-Deklarationen, sondern an den nicht vorhandenen CSS-Einstellungen für bestimmte Blockelemente.  Viele haben es sich ja schon angewöhnt, im body-Tag die Außen- und Innenabstände auf Null zu setzen.

body {
margin: 0;
padding: 0
}

Zusätzlich hierzu sollte man in seiner CSS-Datei auch die Außen- und Innenabstände der anderen Blockelemente mit “0″ initialisieren, um die Kontrolle über die Darstellung der Seite zu behalten.  Tut man dies nicht, so setzen die Browser (Firefox, Internetexplorer, Opera, Chrome, …) eigenmächtig Defaultwerte für Margin und Padding ein und so kommt es, dass z.B. auch das Blockelement “ul” für die Darstellung einer Liste einen vom Webdesigner/Seitenersteller ungewollten Margin-Abstand hat.

Notwendiges CSS-Statement zur Grundbelegung der Außen- und Innenabstände aller Blockelemente:

Nachteil: Es soll nicht verschwiegen werden, daß diese drastische Maßnahme einem zwar die volle Kontrolle über die Seitendarstellung(Browserübergreifend) gibt, auf der anderen Seite aber, das Layout zunächst einmal ziemlich zerstört.
Alle liebgewonnenen, automatischen Vorbelegungen des Browsers gehen verloren und diese sind erst wieder Selektor für Selektor zu setzen.

Fazit: Insgesamt lohnt sich die Zeit, die man für die individuellen Selektordefinitionen investieren muss, aber es ist eine Veränderung, die seine Auswirkungen hat und Arbeit bedeutet.
Wer jedoch nur eine schnelle Lösung braucht, sollte auf die Lösung 1 oder 2 zurückgreifen.

Anzeige

Siehe auch:

Selfhtml: Allgemeines zu Außenrand und Abstand

Selfhtml: Blockelemente

Litte Boxes, Peter Müller: Kalibrierung: Abstände auf null setzen

Heute habe ich mir einmal die Zeit genommen, dem ganzen etwas nachzugehen.

Erkenntnis 1:
Ich hatte angenommen, dass die Befehle aus Browserkompatibilitätsgründen aufgenommen wurden. Nach einer CSS-Recherche stellte sich allerdings heraus, dass alle …ltr-source…  und …rtl-source… Befehle vielmehr dazu dienen, die HTML-Darstellung für die verschiedenen Kulturkreise zu steuern, sprich Schreibweise von links nach rechts, bzw. rechts nach links.

Erkenntnis 2:
Die zweite Erkenntnis ist ein wahrer Hammer:
Die CSS-Stylesheet Anzeige in der Firefox Developer Toolbar zeigt einem NICHT den eigentlichen CSS-Sourcecode an!

Die Developerbar im Firefox bietet viele Möglichkeiten den Ausgabecode einer HTML-Seite zu untersuchen. Eine Möglichkeit davon (sehr nützlich) ist der Menüpunkt “CSS-Stylesheets”. Aber, das was man nach dem Auswählen des Menüpunktes “CSS-Stylesheets” in der Firefox Devoloper Toolbar anzeigt bekommt, ist NICHT die vom Webdesigner hinterlegte Stylesheetanweisung!

In der folgenden Tabelle steht links der CSS-Originalcode und rechts, der von der Firefox Developer Toolbar angezeigten Code:

Wie man sieht, wird der CSS-Code vollkommen aufgebläht dargestellt.
Also Vorsicht:  Das Firefox-Developer-Tool zeigt dem Entwickler nicht den eigentlichen Sourcecode!

Nachtrag

Weiteres Beispiel:

Aufruf

Wenn jemand weitere CSS-Befehlen kennt, die durch das Firefox Developer Tool verändert werden, dann bitte ich, diese Beobachtung als Kommentar zu hinterlassen.