Probleme bei der Formatierung des Wrappers

[Fisherman]

Hallo zusammen,

heute ist mir etwas merkwürdiges passiert. Ich habe bei einem Seitenlayout dem Wrapper einen Rahmen zugewiesen, wodurch zwischen dem oberen Rand des Headers und dem Wrapper ein Abstand entstanden ist. Ich habe dann beim Header margin und padding auf 0 gesetzt. Auch beim Wrapper habe ich padding auf 0 gesetzt. Jedoch ist der Abstand oben immer noch da. Sobald ich die Border-Anweisung beim Wrapper herausnehme, wird alles korrekt dargestellt. Es handelt sich um ein statisches Layout mit einer Breite von 960 Pixel unter Contao 2.11.5. Contao läuft auf XAMPP 1.8 unter Win 7 Pro 64-Bit. Ich arbeite mit dem Browser FireFox 15.

Hier ein Ausschnitt aus meinem CSS:

body {
	background-color: #1e3d57;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 81.25%;
	overflow-y: scroll;
}
#wrapper {
	margin-top: 10px;
	padding: 0;
	background-color: #ffffff;
/*	border: 1px solid #427099; => verursacht Probleme in Darstellung */
}
#header {
	margin: 0;
	padding: 0;
	background: #2e5578 url("../themes/website-name/grafiken/hg-kopf.jpg") left top;
	color: #ffffff;
	
}
#header img.titel {
	position: absolute;
	top: 80px;
	left: 560px;
}

Auch mit dem Firebug konnte ich nichts konkretes finden. Ich hoffe, jemand von euch kann mir helfen, ich denke, es ist ein kleiner dummer Fehler ... Ich wäre für Tipps dankbar.

Gruß

Michael

Edit:
Ich habe jetzt herausgefunden, dass dieser Abstand zwischen oberen Rand des Wrappers und des Headers dann entsteht, wenn ich mit border-top einen Rahmen setze. Alle anderen Seiten lassen sich ohne Probleme mit einer Rahmenlinie versehen.

[Andreas]

Zeig doch mal bitte einen Link auf das Problem.

[Fisherman]

Hallo Andreas,

vielen Dank für die schnelle Antwort. Leider kann ich keinen Link auf die Website schicken, da diese derzeit nur offline auf XAMPP läuft. Auf dem Webspace des Auftraggebers läuft noch die alte Site. Wenn, dann kann ich nur Screenshots schicken, welche sicher nicht so hilfreich sind.

Ich glaube aber, dass ich heute Morgen einen Hinweis auf die Lösung des Problems bekommen habe. Ich habe im Seitenlayout eine Breite von 960 Pixel (= Breite des Wrappers) und eine Höhe von 150 Pixel für den Header angegeben. Das Hintergrundbild für das Banner im Header ist auch 960 x 150 Pixel groß. Ohne Rahmen funktioniert das wohl. Sobald ich aber einen Rahmen setze, muss ich doch dessen Breite auch in die 960 Pixel hinzurechnen, oder? Wenn ich also einen Rahmen mit 1 Pixel Breite setze, darf das Banner-Hintergrundbild nicht größer als 958 x 149 Pixel (1 px links + 1 px rechts + 958 px Bild = 960 px Breite, 1 px oben + 149 px Bild = 150 px Höhe) sein. Stimmt das?

Gruß

Michael

[Andreas]

Nein das stimmt nicht, bzw. einfach ausprobieren mit Firebug. Gibst du einem Blockelement die Breite 100px und einen Rahmen 10px, dann ist seine innere Breite immer noch 100px incl. Rahmen 120px.