✔ DIV Ausrichtung

Status
Nicht offen für weitere Antworten.
L

loco666

Mitglied
Hallo Zusammen,

habe Fogendes Problem:

Baue gerade eine Seite mit verschachtelten DIV´s die verschieden ausgerichtet sind.
Im Firefox wird alles toll dargestellt nur der IE macht zicken:

hier der Auszug des CSS:
Code: 
#body{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:1;
}
#head{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:60px;
	z-index:2;
	visibility: visible;
}
#headnav{
	position:absolute;
	background-color:#004D91;
	left:0px;
	top:60px;
	width:100%;
	height:25px;
	z-index:3;
	visibility: visible;
}

#bottom{
	position:absolute;
	background-color:#004D91;
	left:0px;
	bottom:0px;
	width:100%;
	height:25px;
	z-index:4;
	visibility: visible;
}
#News{
	position:absolute;
	left:50%;
	top:85px;
	width:902px;
	margin-left:-451px;
	height:50%;
	z-index:5;
	visibility: visible; 
	overflow: auto; 


}

#bottomNav{
	position:absolute;
	left:50%;
	width:902px;
	margin-left:-451px;
	height:215px;
	z-index:100;
	background-color: #990033;
	visibility: visible;
    bottom: 25px;}


und hier das HTML-Dokument:
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>title</title>
<link href="main_style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="body">
<div id="head"></div>
<div id="headnav"></div>
<div id="News"></div>
<div id="bottomNav"></div>
<div id="bottom"></div>
</div>
</body>
</html>

Ich weiß es wird wahrscheinlich wieder irgend ne Kleinigkeit sein, wäre trotzdem toll wenn sich das mal jemand anschauen könnte.

thx

Loco
 
Hi,

versuch mal, dem body und dem Viewport (html) eine Höhe 100% zuzuweisen. Außerdem sollten
Außen- und Innenabstände für den IE auf Null gesetzt werden (wg. Scrollbars).

Ergänze hierfür dein CSS am Anfang durch
Code: 
* html body, * html html{ height: 100%;}
                          margin: 0;
                          padding: 0;}
Bei den einleitenden * html vor body und html handelt es sich um CSS-Filter, die nur von
IEs interpretiert werden.

Vielleicht hilft dir das weiter.

Ciao
Quaese
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück