nicht angemeldet
DIV größer als Fenster (NICHT unscrollable-content bug)
Hallo zusammen,
vielleicht kann mir ja hier jemand helfen. Hab schon so einiges versucht und auch allerhand Hacks, die man im Internet findet ausprobiert.
Das Problem ist, dass mein Seiteninhalt die Fensterhöhe übersteigt und teilweise auch Scrollbars angezeigt werden, diese aber nicht ganz bis an das Textende fortlaufen.
Das Problem hierbei ist, dass wohl margin, padding, margin-top, padding-top, top oder was man auch sonst so probiert (alles ausprobiert) im IE eine Verschiebung relativ zum body verursachen, jedoch nicht das untere Ende dem Fenster anpassen sondern einfach überlaufen und genau in einer Höhe des paddings (margins/tops) abgeschnitten werden.
Ich denke nicht, dass es sich hier um den unscrollable-content bug handelt, da der betroffene Container nicht "absolute" positioniert ist. Funktioniert weder, wenn ich ihn "static", noch wenn ich ihn "relative" positioniere.
Dazu ist noch anzumerken, dass dieser Fehler NUR bei einem XHTML-Doctype auftritt (sowohl xhtml1.0 als auch xhtml1.1 alle Varianten) und bei HTML4.0 Transitional alles wie eigentlich gewünscht aussieht. Schätze es liegt also irgendwo am Standard-Mode.
Ich kann aber die Seite nicht im HTML-Doctype ausliefern, da dadurch meine Javascript-Effekte (moo.fx-Bibliothek) nicht funktionieren.
Habt ihr dazu ne Lösung (wenn möglich ohne den DIV durch Pixelangaben zu beschränken, denn der sollte schon 100% des restlichen Fensters einnehmen in der Höhe, das sieht sonst etwas seltsam aus)?
Schon mal Danke im Voraus,
Andreas
-
<!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;
}-
Scheinbar hat keiner eine Idee?
-