IE und margin-top nach position absolute

Status
Nicht offen für weitere Antworten.
H

h_yoda

Grünschnabel
Hi,

folgendes simples Markup verwende ich.

Code: 
  <div id="head"></div>
  <div id="info">Infopath
   blubb
  </div>

  <div id="nav_main">
    blubb
  </div>
  
  <div id="content_main">
     blahh
  </div>

Dazu folgender CSS Code

Code: 
#brand{
  position:absolute;
  top:0;
  left:0;
  height:100px;
  background: #A4E1E1 url(../images/logo.jpg) no-repeat 50px center;
  width:100%;
  border-bottom:1px solid black;
}
#nav_main{
  position:absolute;
  top:121px;
  left:0;
  margin:0;
  padding-left:10px;
  width:150px;
  border-right:1px solid black;
}
#info{
 margin-top:101px;
 height:20px;
 width:100%;
 background-color:#A4E1E1;
}

#content_main{
 margin-left:151px;
 padding-left:10px;
}

Wiso platziert der IE das Info DIV ganz oben und damit nicht sichtbar?
 
Hi,

was verstehst du unter ganz oben?

Bei mir besitzt das Element in allen mir zur Verfügung stehenden Browsern den festgelegten Abstand nach oben zum DIV #head.


mfg Maik
 
Danke, aber beim ausführen folgenden Codes rutscht das info Div bei mir im IE5.01,IE 5.5, IE6 und IE7 nach oben (hinter das brand div) .
Irgendwas schnall ich nicht!

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" xml:lang="en" lang="en">
<head>
  <link rel="shortcut icon" href="/favicon.ico" />
  <style type="text/css" >
    #brand{
      position:absolute;
      top:0;
      left:0;
      height:100px;
      background: #A4E1E1 ;
      width:100%;
      border-bottom:1px solid black;
    }
    #nav_main{
      position:absolute;
      top:121px;
      left:0;
      margin:0;
      padding-left:10px;
      width:150px;
      border-right:1px solid black;
    }
  
    #info{
     margin-top:101px;
     height:20px;
     width:100%;
     background-color:green;
    }
  
    #content_main{
     margin-left:160px;
     padding-left:10px;
    }
  </style>
</head>


<body>
  <div id="brand"></div>
  <div id="info">Infopath</div>
  <div id="content_main"> blahh</div>
</body>
</html>
 
Das liegt daran, dass die DIVs mit der absoluten Positionierung aus dem normalen Textfluß genommen werden.

mfg Maik
 
Zu welchem Element soll denn die margin-top-Deklaration überhaupt gelten?

Ansonsten positionier das Element gleichfalls absolut, wie die übrigen DIVs.

mfg Maik
 
steht weiter unten, musst scrollen
zu
Code: 
<body>
  <div id="brand"></div>
  <div id="info">Infopath</div>
  <div id="content_main"> blahh</div>
</body>

Klar kann man das mit position absolute auch machen. Aber was versteht der IE dabei nicht?
 
Um hier zu einem Ende zu finden, empfehle ich dir, wenn du schon die DIVs absolut positionieren möchtest, es mit den übrigen benachbarten (nachfolgenden) DIVs gleich zu tun.

mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück