Unnötiger Abstand

[doni]

Hallo allerseits,

es geht um die folgende Seite:
http://www.uhcobersiggenthal.ch/v2/

die CSS-Datei:
http://www.uhcobersiggenthal.ch/v2/css/screen_default.css

Und zwar gibt es oben einen 8px hohen Abstand zum Rest der Seite wenn man in Firefox oder Opera surft. Der IE stellt es ohne den Abstand dar.

Ich kann mir aber nicht erklären, wie der Abstand dahin kommt!

Kann mir jemand auf die Sprünge helfen?

Vielen Dank
doni

[Richard]

Hallo doni,

Ich kann mir aber nicht erklären, wie der Abstand dahin kommt!

Du musst den Defaultwert für das margin des body-Elements mit 0 überschreiben.

Beste Grüße
Richard

[doni]

Hallo Richard,

Du musst den Defaultwert für das margin des body-Elements mit 0 überschreiben.

das ist schon passiert:

body{
margin: 0px;
padding: 0px;
font: 75%/140% Arial, Helvetica, sans-serif;
}

Gruss doni

[Ingo Turski]

Hi,

Und zwar gibt es oben einen 8px hohen Abstand zum Rest der Seite wenn man in Firefox oder Opera surft. Der IE stellt es ohne den Abstand dar.

Du hast zwar (leider) die vorgegebenen Schriftgrößen für alle Elemente egalisiert, aber dessen margins nicht definiert. Gerade Überschriften warten mit unterschiedlichen Voremstellungen auf.
Und nein, bitte verstehe dies jetzt nicht als Tip, auch noch *{margin:0} zu definieren.

freundliche Grüße
Ingo

[doni]

Hallo Ingo,

Du hast zwar (leider) die vorgegebenen Schriftgrößen für alle Elemente egalisiert, aber dessen margins nicht definiert. Gerade Überschriften warten mit unterschiedlichen Voremstellungen auf.

Also wenn ich den Unterton in deiner "Stimme" richtig verstanden habe, findest du das nicht die geniale Idee mit dem

*{
font-size: 100%;
}

was ich auch verstehen kann. Das Layout basiert auf joshua inks 3 column layout, und das habe ich einfach mal so übernommen. Jetzt ists nimmer drin!

Aber du hast mich auf die richtige Fährte gebracht: die <h1> Überschrift im #header war der Bösewicht!

Nun habe ich die margins von #header h1 eliminiert und der Abstand ist wie gewünscht verschwunden.

Ist diese Lösung "ok" oder habe ich dich sowieso ganz falsch verstanden?

Gruss und Dank
doni

[Ingo Turski]

Hi,

Also wenn ich den Unterton in deiner "Stimme" richtig verstanden habe, findest du das nicht die geniale Idee mit dem

*{
font-size: 100%;
}

so ist es. Du kannst davon ausgehen, dass die Browser-Defaults schon sinnvoll sind, um das Markup auch ohne CSS adäquat anzeigen zu lassen. Wenn Du nun mit der Keule einen Rundumschlag machst, darfst Du kein einziges Element bei der CSS-Formatierung übersehen, dass ggfls. eine abweichende Formatierung erhalten sollte.
Solch ein Rundumschlag hat lediglich den Vorteil, dass man beliebige Elemente völlig ohne Beachtung ihrer Bedeutung verwenden kann, also nach Belieben z.B. H1 im Quelltext für Suchmaschinen einstreuen kann, ohne dass sich dies optisch auswirken würde.

Nun habe ich die margins von #header h1 eliminiert und der Abstand ist wie gewünscht verschwunden.

Ist diese Lösung "ok" oder habe ich dich sowieso ganz falsch verstanden?

Nein, das ist genau richtig so - auch dass Du Dich auf diese spezielle H1 beschränkst und einer evtl. folgenden H1 nicht ihre meist erforderlichen margins nimmst.

freundliche Grüße
Ingo