Hintergrundfarbe in einem 100% hohen <div> wird ignoriert

[Ralf Leinemann]

Moinmoin,

auf einer (noch nicht fertigen) Testseite http://www.leinemann.net/sbag/muster.htm habe ich ein Problem mit der Hintergrundfarbe der Navigationsleiste am linken Rand.

Ich verwende einen zentral positionierten Container. Innerhalb dieses Containers sind alle DIVs absolut positioniert, die Menüleiste links soll eine Höhe von 100 % und eine Hintergrundfarbe haben, die sich am Ende des Menüs bis an den unteren Bildschirmrand fortsetzt.

Im IE6 sieht alles richtig aus (OK, es sieht so aus, wie ich es mir vorgestellt habe :-), Mozilla, Firefox und Netscape ignorieren jedoch die Hintergrundfarbe (und die rote Linie, die ich zum Testen um den entsprechenden DIV gezogen habe).

Kann mir jemand sagen, woran das liegt? Laut Validator sind HTML und CSS fehlerfrei.

Stürmische Grüße aus Hamburg
Ralf

[wahsaga]

hi,

Mozilla, Firefox und Netscape ignorieren jedoch die Hintergrundfarbe (und die rote Linie, die ich zum Testen um den entsprechenden DIV gezogen habe).

Kann mir jemand sagen, woran das liegt?

vermutlich daran, dass dein div in diesen browsern _gar keine_ höhe hat.

Laut Validator sind HTML und CSS fehlerfrei.

das sagt nicht viel aus. syntaktische korrektheit bedeutet ja noch nicht, dass es auch logisch sinnvoll wäre.

hast du beispielsweise berücksichtigt, dass sich 100% höhe immer auf die höhe der vorfahrenelemente beziehen?

gruß,
wahsaga

[MudGuard]

Hi,

Laut Validator sind HTML und CSS fehlerfrei.
das sagt nicht viel aus. syntaktische korrektheit bedeutet ja noch nicht, dass es auch logisch sinnvoll wäre.

Ich hatte da mal vor Jahren einen Compiler, der hat bei erfolgreicher Compilierung nicht

0 errors

gemeldet, sondern brachte den (m.E. viel besseren) Text:

none of your errors have been found.

cu,
Andreas

[Ralf]

Hallo Mudguard, hi wahsaga,

ja, die fehlende Höhenangabe für HTML war mein Fehler. Jetzt geht es.

Vielen Dank und ein golden herbstliches Wochenende.

Ralf

[MudGuard]

Hi,

Ich verwende einen zentral positionierten Container. Innerhalb dieses Containers sind alle DIVs absolut positioniert, die Menüleiste links soll eine Höhe von 100 % und eine Hintergrundfarbe haben, die sich am Ende des Menüs bis an den unteren Bildschirmrand fortsetzt.

Du meinst navisub?
Ok, das hat eine Höhe von 100% - also die Höhe seines Elternelements (div #container).
Dieses hat eine Höhe von 100% - also die Höhe seines Elternelements (body).
Dieser hat eine Höhe von 100% - also die Höhe seines Elternelements. Diese Höhe ist aber nicht gesetzt, also gilt für dieses Elternelement der Wert auto. 100% von auto werden als auto interpretiert.

Das geht über alle Stufen zurück bis zum div navisub, dessen Höhe also als auto betrachtet werden muß.
Es ist also genau so hoch wie sein Inhalt.
Für seinen Inhalt ist jeweils eine Hintergrundfarbe gesetzt, also gibt es keine Stelle, an der die Hintergrundfarbe des div#navisub durchgucken könnte.

cu,
Andreas