Inhalt läuft aus dem Inhaltsbereich raus...

spacegaier · 10 Oktober 2007

Hallo zusammen,

ich habe bei meinem drei Spaltenlayout ein Problem:

Obwohl alle Teile height: 100% haben, läuft der Inhalt in IE7 und im FF2 unten aus dem Inhaltsbereich raus. Warum das?

Da scheint irgendwas schief zugehen. So hört z.B. im IE7 und im FF2 der untere Rahmen, welcher in der ID wrapper um die ganze Seite gelegt wird, viel zu weit oben auf, will sagen, mann sieht den unteren Rand gar nicht, da die drei Spalten darüber hinaus gehen.

Im Opera9 hingegen ist fast alles perfekt: Dort umschließt der Rahmen die ganze Seite, allerdings sind die beiden äußeren Spalten nicht bis ganz unten mit dem Hintegrundbild gefüllt.

Ich habe jetzt schon stundelang mit den Werten rumgespielt und mir Artikel zum Boxmodell durchgelesen, aber keine Lösung hinbekommen.

Hoffe jemand von euch kann mir hier helfen.

Hier das template (diese fill_in_funktionen füllen die Spalten mit Inhalt):

Code:

echo"<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>
<html>
<head>
<title>Tulla-Abi08Page</title>
<link rel='stylesheet' type='text/css' href='design_4.css'>
</head>
<body>
<div id='wrapper'>
<div id='header'></div>
 
<div id='subnav'>";
fill_in_subnav($cmd);
echo"</div>
<div id='contentfloatholder'>
<div id='left'>
 
<div id='menu'>";
fill_in_menu($cmd);
echo"</div>
 
<div id='status_screen'>
Die Seite ist im Alpha-Stadium!
</div>
 
</div>
 
<div id='right'>
 
<div id='loginform'>";
fill_in_login_area();
echo"</div>
 
</div>
<div id='centerwrap'>";
fill_in_content($cmd);
echo"</div>";
 
echo"</div>";
echo"<div id='footer'>TullaAbi08Homepage<br>© spacegaier 2007</div>
 
</div>
</body>
</html>";

design_4.css:

Code:

*
{
   margin: 0px;
   padding: 0px;
   border: 0px;
   font-family: Tahoma, 1em;
}
body
{
   background: #fff;
   font-family: Tahoma;
   height: 100%;   /* Für IE7 */
}
html
{
   height: 100%;   /* Für IE7 */
}
#wrapper
{
   width: 90%;
   margin: 0 -5% 0 5%;
   border: 1px solid #000;
   height: 100%;
}
#header, #subnav, #footer
{
   clear: both;
   width: 100%;
}
#header
{
   background-image: url(img/header_4.jpg);
   height: 70px;
}
#subnav
{
   background-image: url(img/subnav_4.jpg);
   color: #377593;
   height: 25px;
   border-bottom: 1px solid #000;
   border-top: 1px solid #000;
}
#contentfloatholder
{
   width: 100%;
   height: 100%;
}
#centerwrap
{
    height: 100%;
 background-color: #3F7D9E;
 margin-left: 180px;
 margin-right: 180px;
 padding-top: 15px;
}
#right
{
   width: 180px;
   float: right;
 background-image: url(img/right_column_4.jpg);
 height: 100%;
 border-left: 1px solid #000;
}
#left
{
   width: 180px;
   float:left;
   background-image: url(img/left_column_4.jpg);
   height: 100%;
   border-right: 1px solid #000;
}
 
#footer
{
    background-image: url(img/subnav_4.jpg);
    color: #000;
    height: 35px;
    font-size: 8pt;
    text-align: center;
    border-top: 1px solid #000;
}

Wenn ihr Screenshots braucht, einfach melden...

prostel · 11 Oktober 2007

Merke eins, div height 100% -> evil
Sowas sollte man vermeiden da divs arge Probleme haben, sich an
dynamischen Content anzupassen wenn du diese Einstellung wählst

Etwa du wählst feste Werte oder du machst es dynamisch, dann könnte man solch einen Weg wählen

HTML:

#contentfloatholder div {
  min-height:600px;
  height:expression(this.scrollHeight > 600 ? "auto":"600px"); 
}

Müsstest du natürlich etwas anpassen, aber so würde er für alle
Browser eine mindesthöhe wählen

Inhalt läuft aus dem Inhaltsbereich raus...

spacegaier

Neues Mitglied

prostel

Neues Mitglied

Neueste Beiträge