Problem mit CSS und Internet Explorer!

Berki · #1 (**permalink**) 08.08.2004, 21:04

Hallo!

Habe ein kleines Seiten-Layout entworfen, bei dem links ein Bereich sein soll, der bis zum unteren Bildschirmende (bzw. bis zum Inhaltsende) gehen soll und dessen Breite ich in Pixel angeben will (umbedingt). danaben soll ein Bereich sein wo eben Irgendein Inhalt sein soll. Hab dazu mal folgenden Code geschrieben:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html, body {
height:100%;
}
</style>
</head>

<body>
<div>
<div style="float:left; width:200px; height:100%; background-color:#00FF00">navigation</div>

</div>
<div style="background-color:#FFFF00; margin:0px 0px 0px 220px; overflow:scroll;">
Hallo!

SomeTextSomeTextSomeTextSomeTextSomeTextSomeTextSo meTextSomeTextSomeTextSomeTextSomeTextSomeTextSome TextSomeTextSomeTextSomeTextSomeTextSomeTextSomeTe xtSomeTextSomeText
</div>
</body>
</html>

Es funktioniert ja auch, wenn ich den Text weglösche, also nur Hallo reinschreibe! Nur sobald mehr Inhalt reinkommt, stellt der Internet Explorer die verücktesten Sachen dar (Der Text kommt erst ganz unten, wenn man scrollt, etc.)!!

Kann mir irgendwer sagen wieso und was ich dageben tun kann? Ich wäre euch echt dankbar dafür!

mfg
Daniel

Berki · #2 (**permalink**) 09.08.2004, 08:35

Hallo!

Das erste Problem hat sich erledigt, nur hab ich jetzt ein anderes: Ich möchte das mein linker Bereich (id="navigation") 100% hoch is, aber wenn der Inhalt vom rechten Bereich (id="content") höher als die ganze Seite ist, möchte ich haben, das der linke Bereich auch gleich hoch als der content Bereich wird. Also für navigation immer 100% höhe, außer der content is höher, dann die höhe des contents. Hier mal der Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<style type="text/css">
html, body {
height:100%;
margin:0px;
padding:0px;
}
#navigation {
position : absolute;
width:250px;
height:100%;
background-color:#0000FF;
}
#content {
padding-left:260px
}
</style>
</head>

<body>
<div style="background-color:#99FF00">
<div id="navigation">Navigation</div>
<div id="content">
<div style="width:2000px; height:2000px; background-color:#CCCCCC">To simulate a big element!</div>
</div>
</div>
</body>
</html>

Wäre echt toll, wenn mir jemand helfen könnte!

mfg & thx
Daniel

terrikay · #3 (**permalink**) 09.08.2004, 10:39

Das geht nicht wirklich. Divs sind einzeln und unabhängig voneinander.

Workaround:

- ein großer, umfassender Container, mit einem Hintergrundbild, dass sich links kachelt (wo die Navigation sitzt) - dieser Container wird nun mitwachsen, wenn sich der Inhalt ausdehnt und das Hintergrundmuster/farbe "mitnehmen". Dadurch sieht es dann so aus, als ob auch der Navigationscontainer wachsen würde.

- dazu mußt Du dem Container aber unbedingt ein min-height:100% geben (dem Inhaltscontainer ebenso) - sonst hören die beiden nach einer Monitorhöhe auf. Nur der IE bekommt ein height: 100%; weil der zwar das min-height nicht versteht, dafür aber die Container automatisch verlängert.
Kann man z.B. durch

*html #container {height:100%;} erreichen.......

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
internet explorer 5/6 layout problem	alejandro	CSS	3	15.10.2008 17:46
CSS Border Problem Internet Explorer	elBoB	CSS	1	21.07.2008 14:35
Internet Explorer und Firefox Css??	p.rogge	CSS	4	24.06.2008 17:26
Padding Problem mit Internet Explorer	spinne84	CSS	2	03.05.2007 15:04
Rollover Problem im Internet Explorer	Beb	CSS	9	21.06.2005 18:49