Andreas: DIV größer als Fenster (NICHT unscrollable-content bug)

Beitrag lesen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Sparkassenakademie Bayern</title>
<meta http-equiv="Content-Type" content="text/xml; charset=iso-8859-1"/>
<link rel="stylesheet" type="text/css" href="http://localhost/praktikum/HP_SPKAKAD/LOKAL/css/akalayout.css"/>
<!--conditionaly load css-fix for IE 5+ to patch for lack of fixed positioning-->
<!--[if gte IE 5]>
<LINK rel="stylesheet" type="text/css" href="http://localhost/praktikum/HP_SPKAKAD/LOKAL/css/iefix.css"/>
<![endif]-->
</head>

<body>

<div id="borderleft"></div>

<div id="logo">
     <img src="http://localhost/praktikum/HP_SPKAKAD/LOKAL/images/headerleft.jpg" alt="headerlinks" border="0"/>
</div>
<div id="menue">
hier ist das Menü
</div>

<div id="header">
 <img src="http://localhost/praktikum/HP_SPKAKAD/LOKAL/images/header1024-1h.jpg" alt="header" border="0"/>
</div>

<div id="ie-content-background">
     <!-- hier wird die Seite angezeigt -->
     <div id="content"></div>
</div>

</body>
</html>

die CSS dazu:

akalayout.css

/* Styles für die DIVs */
#borderleft{
 z-index: 0;
 position: fixed;
 border-right: 1px solid #666666;
 padding: 0px;
 top: 0px;
 left: 0px;
 height: 100%;
 width: 24px;
 background-color: #F0eee5;
}

#logo {
 z-index: 0;
 position: fixed;
 top: 10px;
 left: 30px; /*25*/
 width: 200px;
 height: 90px;
}

#menue {
        z-index: 1;
        position: fixed;
 left: 22px;
 top: 100px;
 width: 200px;
 padding: 10px;
 margin: 0px;
}

#header {
 z-index: 1;
 position: fixed;
 top: 0px;
 left: 225px;
 height: 90px;
 width: 800px;
 background-color:#EEEEEE;
 border-bottom: 20px solid #EEEEEE;
}
#ie-content-background {
  overflow: visible;
}
#content {
        z-index: 0;
        position: static;
        overflow: visible;
        margin: 130px 10px 10px 220px;

}

iefix.css:

html {
  /*äußere Scrollbars entfernen */
  overflow: hidden;
}
body {
  /* wichtig für linke Randleiste (id: borderleft)*/
  height: 100%;
  margin: 0;
  padding 0;
  /* auch hier Scrollbars entfernen, es darf nur der content Scrollbars besitzen */
  overflow: hidden;

}
#logo, #borderleft, #menue, #header {
  /* da der IE keine fixed-Positionierung versteht, müssen die feststehenden Bereiche auf absolute gestellt werden */
  z-index: 1;
  position: absolute;
}

#ie-content-background {
         position: static;
         z-index: 0;
         overflow: hidden;
         margin: 120px 0px 0px 230px;
}

#content {
         margin: 0px 0px 0px 20px;
         height: 100%;
         overflow: auto;
}