CSS "Frames" im Internet Explorer

[mustermann35]

Guten Tag!

Ich möchte gerne eine Seite aufbauen, bei der oben und links ein fixer Bereich ist, der nicht mitscrollt. Der scrollbare Bereich soll nur in der Mitte sein. So soll es aussehen:

-------------------------------
Oberer fixer Bereich
-------------------------------
M | Scrollbarer
e | Seiteninhalt
n |
ü |
-------------------------------

Dazu habe ich eine recht gute Vorlage gefunden: http://www.dynamicdrive.com/style/layou ... es-layout/
Dort besteht jedoch das Problem, daß der linke Bereich den oberen überschneidet. Ich habe es auch hinbekommen, dies zu ändern doch dann tritt unerklärlicherweise das Problem beim Internet Explorer auf, daß der obere fixe Bereich rechts genau um die Breite des Menüs abgeschnitten ist.

Hierzu ein kleinen Codeschnipsel, der das Problem vielleicht besser erklärt, so sieht es im Original aus:
--------------------------------------------
#framecontentLeft, #framecontentTop{
position: absolute;
top: 0;
left: 0;
width: 200px; /*Width of left frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}

#framecontentTop{
left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
right: 0;
width: auto;
height: 120px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}
--------------------------------------------

Was mich schon verwirrt, ist, daß im ersten Abschnitt Top und Left Frame in einem Codeabschnitt sind. Hier ist meine Version, die so auch für Firefox und Opera läuft, nur im Internet Explorer nicht:
--------------------------------------------
#framecontentTop{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 10%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}

#framecontentLeft{
position: absolute;
top: 0;
left: 0;
width: 12%; /*Width of left frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}
--------------------------------------------

Wie kann man den Ursprungscode so ändern, daß der obere Teil den linken Teil überdeckt und dabei trotzdem die volle Breite - auch im Internet Explorer - erhält?

Über Hilfe wäre ich sehr dankbar.

Gruß,
mustermann

[Laus]

Vielleicht ist das ja genau was Du suchst

Gruß Xaver

[mustermann35]

Danke für den Link, aber das funktionert im Opera nicht ganz korrekt und es fehlen auch sonst ein paar Einstellungsmöglichkeiten für den oberen Bereich etc. Hat irgendjemand noch eine Idee oder Tips, was ich da falsch gemacht habe oder wie man das Design ändern kann?

[Laus]

Wenn dir das eine nicht gefällt dann vielleicht das hier.

[mustermann35]

Danke, Laus!
Genau das habe ich auch schon gefunden. Das Problem, was sich unabhängig von jeder Vorlage zeigt, ist folgendes: Gebe ich die Breite des oberen "Frames" an, trifft diese nicht für den Internet Explorer zu, soll heißen, ein Logo, welches oben rechts plaziert wird, ist nicht zu sehen, da die Breite ganz anders interpretiert wird. Genauer gesagt: Im IE ist der obere Abschnitt 100% breit minus der Breite des linken "Frames". Es ist egal, ob ich bei "width" 100% oder sontwas einstelle. Woran liegt das? Das war ja auch, wie ich jetzt herausgefunden habe, genau das gleiche Problem wie bei der ersten Vorlage. Weißt Du da zufällig eine Lösung? Liegt es vielleicht an den Prozentangaben, kann der IE damit nicht um?

[Laus]

Was spricht dagegen das Logo als img im Header einzubinden und nicht als ein eigenständiges div?

[mustermann35]

Dagegen spricht nichts. Nur dummerweise will das nicht funktionieren. Bei Firefox und Opera funktioniert es, nur im IE ist die Breite völlig falsch eingestellt, sodass das Logo ganz rechts nicht angezeigt wird. Links und in der Mitte funktioniert es jedoch...

[mustermann35]

Danke für deine Hilfe, Laus!
Ich habe jetzt doch gefunden, was ich gesucht habe: http://www.cssplay.co.uk/layouts/frame.html
Dieses Design funktioniert nach allen Kriterien und in jedem Browser, ich bin beeindruckt!