CSS-Design mit versch. Browsern

[crusader4]

Hallo Forum!
Ich bin relativ neu was das Thema Webdesign angeht. Nun wollte ich ein Homepage-Design allein mit CSS realisieren.

Im Opera 8.0 (Build 7561) sieht die Sache auch so aus, wie ich sie (vorerst) haben möchte:
http://img300.echo.cx/img300/3204/opera3hu.th.png (http://img300.echo.cx/my.php?image=opera3hu.png)

Im IE bietet sich folgendes Bild:
http://img300.echo.cx/img300/3647/ie0mk.th.png (http://img300.echo.cx/my.php?image=ie0mk.png)

Nun dachte ich: "IE kann nicht richtig mit CSS umgehen und daher ist das normal. Lädst du Dir mal Firefox runter und probierst es damit." Gesagt getan.
Doch oh Graus, hier ist es auch nicht besser. Im Gegenteil:
http://img300.echo.cx/img300/6516/firefox1rg.th.png (http://img300.echo.cx/my.php?image=firefox1rg.png)

Meine Fragen hierzu: Liegt der Fehler bei mir oder bei den Browsern? Könnte wer mit mehr Ahnung das mal überprüfen?

Wenn ihr Vorschläge habt wie es auf IE, FF, Opera nur unter Verwendung von CSS läuft, wäre ich euch dankbar.

Danke euch allen schon mal im Voraus! Stört euch bitte nicht an den Farben, das ist natürlich alles noch nicht endgültig. Erst mal muß die Aufteilung stehen, bevor ich weitermache.
Quelltexte zum Debugging befinden sich im Anhang, einfach das .txt beim Umbenennen entfernen; die php-datei müßte auch ohne laufenden server grundsätzlich funktionieren - einfach als html-datei in den browser laden.

Grüße, Crusader

[darph]

Öhm...

#content
{
background-color:#660022;
color:#000000;
width:80%;
height:100%;
}

Die relative Angabe bezieht sich doch auf das Elternelement, oder nicht?

Hast du mal 100% versucht?

[darph]

Ugly Workaround:

/* Aussehen der Sitemap */
#sitemap
{
/*background-color:#660022; */
color:#FFFFFF;
width:150px;
padding-top:10px;
position:absolute;
height:99%;
max-height:71%


}

/* Aussehen des Hauptteils */
#content
{
background-color:#660022;
position:relative;
color:#000000;
position:absolute;
height:99%;
width:80%;
left:170px;
max-height:72%
}

Ich find's irgendwie Designtechnisch äußerst unschön, daß beim Firefox die Elemente einfach mal eben so aus den Elternelementen rausfallen können.

Und die Verwendung von padding als Einrückung im Fux ist auch.. eh.. abenteuerlich.

[crusader4]

Öhm...

#content
{
background-color:#660022;
color:#000000;
width:80%;
height:100%;
}

Die relative Angabe bezieht sich doch auf das Elternelement, oder nicht?

Hast du mal 100% versucht?Erstmal danke Dir für die Antwort und die Mühe das durchzukauen.

Wenn ich da 100% nehme, wird das Teil so groß wie der Container in dem es steckt und ist damit hinter der Sitemap. Es sollte ne Aufteilung werden: 20% Sitemap, 80% Content. Damit dürphte doch der Container ausgefüllt sein, denn auch ich bin der Meinung das sich die Angabe auf das Elternelement bezieht.

Ich find's irgendwie Designtechnisch äußerst unschön, daß beim Firefox die Elemente einfach mal eben so aus den Elternelementen rausfallen können.

Und die Verwendung von padding als Einrückung im Fux ist auch.. eh.. abenteuerlich.Die Aussage irritiert mich. Meinst du jetzt das ich beim Design was vermasselt habe oder die Browser? Meiner Meinung nach habe ich mich an die Standards gehalten. Padding ist doch der Innenabstand vom Elternelement. Wie soll man das denn sonst machen?

Deine Vorschläge verbessern die Situation wenigstens, danke (wenn auch nicht begründbar warum das so ist)!

Weitere Meinungen und Vorschläge sind herzlich willkommen!

Grüße, Crusader

P.S.: Fiel mir grad ein: Kann das sein, das entweder ich oder die Browser das Box-Modell noch nicht richtig verstanden haben?

Edit: Du gibst als Tip (bei Sitemap und Content): height:99% und max-height:71% ?? Was hat das denn für einen Sinn?

[PatkIllA]

Um die Browser mit einem halbwegs einheitlichen Verhalten zu benutzen, würde ich erst mal auf den Standards-mode setzen.
http://www.heise.de/ix/artikel/2004/03/136/