unerwünschte Leerräume bei Angabe von <h1> oder <ul>

[Elessar]

Hi!
Und zwar hab ich folgendes Problem.
Ich hab mich mal rangesetzt ein Layout ohne Tabellen, sondern mit CSS zu gestalten. Ich bin auch total entzückt davon, leider macht mir mein Mozilla momentan einen kleinen Strich durch die Rechnung. Und zwar hab ich in einem div-Bereich eine Überschrift, bzw. eine Liste. Beides ist mit CSS formatiert, dass es an der gewünschten Stelle erscheint. Allerdings hab ich dann über der Überschrift, bzw. der Liste einen weißen Streifen in meinem Mozilla, wo eigentlich grau sein sollte. Im M$IE funktionierts dagegen.

Ich nehm mal an, dass man nicht gut versteht, was ich hier versuche zu erklären, deshalb hab ich das Ganze mal ins Netz gestellt. Zu finden unter: http://darkrose.host.sk/test.htm

Hat jemand eine Erklärung dafür, wo dieser weiße Streifen um Mozilla herkommt und wie ich das beheben könnte, saodass es auch noch im M$IE akzeptabel aussieht?

Schon mal vielen Dank im Voraus
Elessar

[molily]

Hallo Elessar,

Setze padding:0 für body (insgesamt dann: html,body {margin:o; padding:0;}) und margin:0 für h1, damit sollten die Abstände verschwinden.

Wozu ist eigentlich das #head-div da? Kommen dort noch andere Elemente als das h1-Element hinein? Wenn nicht, dann ist es unnötig, da du die Formatierungen auch direkt auf das h1-Element anwenden kannst. Der Sinn des position:relative erschließt sich mir nicht.

mit margin:0; padding:0 für die ul-Menülisten kannst du übrigens die Einrückung abschalten.

Verwende Nachkommenselektoren anstatt Klassen, aktuell:

<div id="right">
<ul class="menu">...</ul> ... <ul class="menu">...</ul>
</div>

.menu {...}

Besser:

<div id="right">
<ul>...</ul> ... <ul>...</ul>
</div>

#right ul {...} bzw. div#right ul {...} sofern keine anderen ul-Elemente in #right existieren, welche keine Menüs sind und anders formatiert werden.

Grüße,
Mathias

[Elessar]

Hi!

Setze padding:0 für body (insgesamt dann: html,body {margin:o; padding:0;}) und margin:0 für h1, damit sollten die Abstände verschwinden.

Danke, funktioniert.

Wozu ist eigentlich das #head-div da? Kommen dort noch andere Elemente als das h1-Element hinein? Wenn nicht, dann ist es unnötig, da du die Formatierungen auch direkt auf das h1-Element anwenden kannst. Der Sinn des position:relative erschließt sich mir nicht.

Kommt alles noch, ist doch erst im Aufbau.

mit margin:0; padding:0 für die ul-Menülisten kannst du übrigens die Einrückung abschalten.

Verwende Nachkommenselektoren anstatt Klassen, aktuell:

<div id="right">
<ul class="menu">...</ul> ... <ul class="menu">...</ul>
</div>

.menu {...}

Besser:

<div id="right">
<ul>...</ul> ... <ul>...</ul>
</div>

#right ul {...} bzw. div#right ul {...} sofern keine anderen ul-Elemente in #right existieren, welche keine Menüs sind und anders formatiert werden.

Kommt auch alles noch und hat seine Gründe.

Vielen Dank für die Hilfe. (Hätt ich aber auch selbst drauf kommen können.)
Mfg
Elessar