✔ Div mitwachsen lassen

[Homie25]

Hallo zusammen,

ich habe 2 Probleme:

1) Wenn ihr euch das hier mal im IE und dann im Firefox anschaut seht ihr, dass in Firefox der Artikelbereich nicht weiß hinterlegt ist im IE aber schon. Das bedeutet, aus irgendeinem Grund zieht Firefox das Div "main_frame" nicht auf, welches als background: white; vorgesehen hat.

2)Ihr seht, dass die Abstände zwischen den Navigationspunkte [rechts obern] im Firefox richtig dargestellt werde und im IE ist der Abstand aber zu groß. Woran liegt das? Boxmodell-Fehler...

Ach ja und über Vorschläge, wie ich meinen Code optimieren kann bin ich IMMER dankbar. Ich weiß, dass dieser noch nicht valide ist aber das ist Punkt 1 auf meiner todo-list.

Liebe Grüße

Homie

 

[Maik]

Lösung für Problem Nr.1: erweitere das Stylesheet mit folgender CSS-Regel:

div.clear {
    clear: both;
    margin: 0;
    padding: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
}

und füge das DIV .clear im HTML-Quelltext nach dem DIV #content_frame ein:

<div id="content_frame">...</div>
<div class="clear"></div>

Zu Problem Nr.2 kann ich momentan nichts sagen, da mir auf ersten Blick im CSS-Code keine Unstimmigkeiten aufgefallen sind.


Das Thema wird ins CSS-Board verschoben.

 

[Homie25]

Danke Michael,

hat wunderbar geklappt, der clear musste aber noch im <div id="content_frame"></div> am Ende sein.

Problem 2: Ich habe keine Ahnung was es sein könnte, irgendwo habe ich da bestimmt Mist gebaut. Habe gestern noch versucht das an den IE anzupassen aber es ist leider nur noch schlimmer geworden :-(. Hat vielleicht einer von euch eine Idee

Also vielen Dank noch Mal Michael!!

 

[Maik]

Das DIV .clear gehört im HTML-Quelltext aber nach den floatenden DIVs notiert.

Wenn ich es innerhalb des #content_frame notiere, stellen Firefox, Mozilla und Netscape den weißen Hintergrund nicht bis zum unteren Seitenende dar.

Vielleicht hilft es, wenn die Schriftgrösse auf einen Pixel gesetzt, und in dem DIV ein erzwungenes Leerzeichen &nbsp; notiert wird?

div.clear {
    clear: both;
    margin: 0;
    padding: 0;
    height: 0;
    line-height: 0;
    font-size: 1px;
}

<div class="clear">&nbsp;</div>