Internet Explorer stellt Layout falsch dar

phpfuchs · #1 (**permalink**) 14.09.2006, 01:07

Ich möchte eine Webseite im 5 Bereiche aufteilen (oben, Menü, linke und rechte Leiste, zwischen den Leisten der Content-Bereich:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titel</title>
<style type="text/css">
body {
  margin:0;	
}
#top {
  postion:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:40px;
  background-color:blue;
}
#menu {
  position:absolute;
  height:20px;
  top:40px;
  left:0px;
  width:100%;
  text-align:left;
  background-color:yellow;
  padding:0px 0px 0px 0px;
}
#left {
  position:absolute;
  top:60px;
  width:50px;
  height:150px;
  left:0px;
  background-color:green;
}
#right {
  position:absolute;
  top:60px;
  width:50px;
  height:150px;
  right:0px;
  background-color:green;
}
#content {
  position:absolute;
  left:0px;
  top:60px;
  margin-left:50px;
  margin-right:50px;
  padding:0px;
  background-color:gray;
  z-index:0;
  color:#000;
}

</style>
</head>
<body>
<div id="top">top</div>
<div id="menu">menu</div>
<div id="left">left</div>
<div id="right">right</div>
<div id="content">
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
</div>
</body>
</html>

Beim Firefox funktioniert es einwandfrei, beim IE jedoch überschneiden sich der Content-Bereich und die rechte Leiste. Das angehängte Bild zeigt es deutlich. Ich hab's auch schon mit padding statt margin probiert, auch da taucht dasselbe Problem auf.
Kann mir jemand weiter helfen?

mit freundlichen Grüßen

Egon Schmid

mazzo · #2 (**permalink**) 14.09.2006, 09:10

absolut positionierte Elemente sind alle "aus dem Fluss" und "kennen einander nicht". Abstände zueinander erreichen da also nix.

Ich empfehle Dir, Dich mit float (und clear) zu beschäftigen. Damit lässt sich ein drei-Spalten-Layout besser und skalierbarer hinbekommen als mit absoluter Positionierung. In den FAQ findest Du Tipps und Beispiele dazu.

phpfuchs · #3 (**permalink**) 14.09.2006, 09:16

Ich habe soeben eine Lösung gefunden, mit der es funktioniert:

Code:

#content {
  position:absolute;
  left:50px;
  right:50px;
  width:auto;
  top:60px;
  padding:0px;
  background-color:gray;
  z-index:0;
  color:#000;
}

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 stellt die Sites nicht richtig dar	wolle51	(X)HTML	2	14.03.2011 21:06
BSI warnt vor Nutzung des Internet Explorer	False Mirror	Offtopic	29	16.01.2010 20:06
Internet Explorer 7 / Tabelle / min/max-width	pascala	CSS	5	22.02.2009 11:19
Float Layout Problem, Internet Explorer	Azzy	CSS	13	23.12.2005 16:19