Div wird im IE und FF 1.XX nicht angezeigt - trotz korrektem Standard

Pille456

Nabend, ich bins nochmal
Hab nun ein Problem mit dieser Seite:
http://pille456.pi.funpic.de/
und zwar wird der rechte Div in dem 'Test' steht im IE und im FF 1.XX nicht richtig angezeigt.(nämlich gar nicht) Hab schon den W3C CSS und W3C HTML Validator "drüberlaufen" lassen, jedoch sind beide Seiten korrekt und ohne Errors.
Woran kann das liegen, jemand ne Idee?
Falls ihr euch den CSS-Code in Ruhe anschauen wollt, dann hier:
http://pille456.pi.funpic.de/style08.css

Danke

P.S. Sorry das ich sozusagen den gesamten Code poste, aber ich weiss gerade nicht wirklich wo ich ansetzen soll, zumal der Opera/Konquor/FF 2.XX etc. pp. alle die Seite richtig anzeigen

div.MainDiv
{
	height: 100% !important;
	height: 500px;
	min-height: 500px;
	width:	638px;
	border-width: 1px;
	border-style: solid;
	border-color: #000000;
	position: relative;
	background-color: #FFFFFF;
	color: #000000;
}

div.RightBar
{
	top: 99px;
        height: 100%;
	width:	158px;
	border-width: 1px;
	border-style: solid;
	border-color: #000000;
	background-color: #000000;
	float: right;
	right: 0px;
	position: absolute;
	color: #FFFFFF;
}

firefly

naja das liegt daran, das der FX 1.xx und der IE probleme mit css haben. IM FX 2.x funktioniert der code einwandfrei.

Pille456

Jo der Code funktioniert in so manchen Browsern einwandfrei, bis auf FF 1.XX, IE und ein paar exotischen, aber die werde ich mal ganz dreißt außer acht lassen
Problem ist halt nur, dass ca 56% aller User den IE nutzen und da isses dann schon schlecht, wenn ein Div fehlt.

@anpasser: habs geändert ohne erfolg im IE 6.xx

Pille456 schrieb:

Jo der Code funktioniert in so manchen Browsern einwandfrei, bis auf FF 1.XX, IE und ein paar exotischen, aber die werde ich mal ganz dreißt außer acht lassen
Problem ist halt nur, dass ca 56% aller User den IE nutzen und da isses dann schon schlecht, wenn ein Div fehlt.

@anpasser: habs geändert ohne erfolg im IE 6.xx

Doch so funktioniert das zumindest im IE6 und IE7.

height: 100%; kannst du fast immer knicken. Sofern es denn beachtet wird, führt es dazu, dass der Text unten aus der Box heraus läuft, wenn er zu viel wird, und vertikal gescrollt werden müsste.

Was du suchst ist min-height, und dass unterstützt erstrecht keine akzeptable Zahl an Browsern.

Pille456

Joa, also es gibt im Internet ja ne Menge "workarounds" für meine Idee/mein Problem, nur gehen deren Seiten immer über die komplette Breite. Dadurch, dass bei mir alles in einem Div zusammengefasst ist um das Mittig zu bekommen zerschieß ich mir diese workarounds immer regelmäßig. Oder kennt ihr ne Seite auf der das eben so aufgebaut ist, wie ich es anstrebe?

Hallo,

du musst die Container ineinander verschachteln. Dann klappt das auch.

a.LinkList
{
	color: #FFFFFF;
	font-family: Verdana, sans-serif;
	text-align: center;
	height: 50px;
	width:  160px;
	top: 100px;
	border-width: 0px;
	border-style: solid;
	border-color: #FFFFFF;
	background-color: #000000;
	float: left;
	text-decoration: none;
	line-height:250%;
}

a.LinkList:hover
{
	width: 158px;
	height: 48px;
	color: #000000;
	border-width: 1px;
	border-color: #000000;
	background-color: #FFFFFF;
}

div.MainDiv
{
	height: 100% !important;
        min-height: 500px;
	height: 500px;
	width:	100%;
	border-width: 1px;
	border-style: solid;
	border-color: #000000;
	position: relative;
        background-color: #FFFFFF;
}
div.MainText
{
      position:absolute;
      top:51px;
      height:450px;
      width:100%;
      color: #000000;   
      clear: both;
      overflow:auto;
}
div.RightBar
{
	top: 0px;
        height: 499px;
	width:	158px;
	border-width: 1px;
	border-style: solid;
	border-color: #000000;
	background-color: #000000;
	float: right;
	right: 0px;
	color: #FFFFFF;
}

div.Banner
{
	height:	98px;
	width:	798px;
	top: 0px;
	left: 0px;
	border-width: 1px;
	border-style: solid;
	border-color: #000000;
	background-color: #FF0000;
	position: relative;
	color:#000000;
}

div.Page
{
	width: 800px;
	height: auto;
	display: block;
	margin: 0px auto;
	position: relative;
	overflow:hidden;
	border-width: 3px;
	border-style: solid;
	border-color: #000000;
}

div.footer 
{
	clear:both;
	background: #efefef;
  	text-align: center;
   	height: 30px;
    overflow:hidden;
    position: relative;
   	color:#000000;
}

Modertiert von árn[y]ék:
Überschrift des ersten Posts mit dem Code des Zweiten zusammengelegt

Pille456

Hmm irgendwie stehe ich gerade aufm schlauch bzw. weiss nicht wie genau du das meinst mit dem verschachteln.
Also ein verschachteln aller divs bringt bei mir nur murks raus. Wie genau hast du das gemeint und wo gehört der div 'MainText' hin? (Der Logik nach ist das der sozusagen letzte Div), aber irgendwie hab ich da nichts passenden hinbekommen.

Wurde vom Mod abgeschnitten.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html>
	<head>
		<title> TestPage</title>
		<link rel="stylesheet" type="text/css" href="style08.css">
	</head>
	<body style="background-color:#FAD605">
		<div class="Page" id="Page">
			<div class="Banner" id="Banner"><p>Banner</p></div>
		<div class="MainDiv" id="MainDiv">
                        <div>
				<a class="LinkList" href="index.php?id=News.html">Bla</a>
				<a class="LinkList" href="index.php?id=Der_Jahrgang.html">Blub</a>
				<a class="LinkList" href="index.php?id=Kontakt.html">Blaaa</a>
				<a class="LinkList" href="index.php?id=Forum.html">bluuuub</a>
			      </div>
			<div class="RightBar" id="RightBar"><p>Test</p></div>
		<div class="MainText">Test</div>	
                </div>		
			<div class="footer" id="footer">footer</div>	
		</div>
	</body>
</html>

Pille456

AHHH, SEHR NICE - DANKE!!