stephanie: hintergrundbild kachelt nicht bis ganz runter

Beitrag lesen

Hallo Leute!
Nach tagelangem Probieren, Studieren von anderen Forumsbeiträgen und Verzweiflungsanfällen wende ich mich nun an euch.

Ich hab eine CSS-Seite programmiert. Oben kommt eine Flashdatei rein, im unteren Bereich teilen sich menü und content die Fläche in der vertikalen. Rundherum hab ich ein weiteres div eingebaut, welches garantiert, dass der mittlere Bereich immer bis runtergezogen wird (die eigentliche Seite ist nur 760 breit), auch wenn der Inhalt nicht die ganze Seitenhöhe braucht. Außerdem hab ich in diesem div auch ein HG-Bild untergebracht, welches sich auch bis unten durchkachelt. Gut, das hat ja alles funktioniert, bis ich dann versucht habe, mal mehr Text in den content zu laden. IE kachelt das HG-Bild bis unten hin, aber alle anderen Browser nicht. Kann mir irgendwer sagen, wie ich dieses Problem aus der Welt schaffen kann?

Vielen Dank schon mal!
Liebe Grüße
stephanie

Anbei der CSS-Code und der HTML-Quellcode:

/*angaben, die für den ganzen body gelten*/
body, html {
  font-family:verdana;
  font-size:10px;
  background-color:#330000;
  text-align:center;
  margin:0px;
 padding:0px;
 height:100%;
  scrollbar-base-color:#000000;
  scrollbar-3d-light-color:#666666;
  scrollbar-arrow-color:#333333;
  scrollbar-darkshadow-color:#000000;
  scrollbar-face-color:#000000;
  scrollbar-highlight-color:#333333;
  scrollbar-shadow-color:#000000;
  scrollbar-track-color:#333333;
}

/*schließt alle div-container zusammen*/
#aussenrum {
 background-color:#123456;
 margin:0px auto;
 padding:0px;
 width:760px;
 height:100%;
 background-image: url(bilder/bg_raw.jpg);
 background-repeat: repeat-y;
 background-attachment: fixed;
 background-position: top;
}

/*extrawurst für den internet explorer*/
* html #aussenrum {
 height:100%
}

/*beinhaltet die flash-datei*/
#titel {
 background-color:#456789;
 width:760px;
 padding:0px;
 height:267px;
 margin:0px;
}

/*legt das inhaltsfenster fest*/
#mittelbereich {
 width:585px;
 height:auto;
 float:right;
 padding:0px;
 margin:0px;
}

/*legt das inhaltsfenster fest*/
#content {
 background-color:transparent;
 width:585px;
 height:auto;
 float:right;
 padding:0px;
 font-size:9px;
 line-height:17px;
 text-align:justify;
 color:#666666;
 font-weight:normal;
 margin:10px 0px 40px 0px;
 text-decoration:none;
}

#imcontent {
 width:485px;
 height:auto;
 padding:0px;
 margin:0px 0px 0px 15px;
}

/*legt die linke spalte fest*/
#menu {
 background-color:transparent;
 width:175px;
 height:auto;
 margin:40px 0px 0px 0px;
 float:left;
}

/*class fürs menu*/
.menucontainer {
 /*border:1px solid transparent;*/
 width:105px;
 margin:0px 0px 0px 68px;
}

/*legt die zeile fürs untermenü fest*/
#untermenu {
 /*border:1px solid transparent;*/
 width:585px;
 height:40px;
 float:right;
 padding:44px 0px 0px 0px;
}

/*class füs untermenü (rechts)*/
.untermenucontainer {
 /*border:1px solid transparent;*/
 background-color:transparent;
 margin:0px;
 padding:0px 0px 0px 250px;
}

/*wie verhalten sich die links allgemein im dokument*/
a:link, a:visited {
 text-decoration:none;
 font-weight:bold;
 color:#666666;
}

a:hover {
 text-decoration:none;
 font-weight:bold;
 color:#ffffff;
}

/*wie verhalten sich links in der hauptnavigation; a:link, a:visited und a:hover fürs menü*/
a.menu {
 display:block;
 margin:2px;
 padding:3px;
 border:1px solid #000000;
 background-color:#111111;
 text-align:left;
 color:#666666;
 text-decoration:none;
}

a.menu:link, a.menu:visited {
 background-color:#111111;
 text-align:left;
 color:#666666;
 text-decoration:none;
}

a.menu:hover {
 background-color:transparent;
 border:1px solid #ffffff;
 text-align:left;
 color:#ffffff;
 text-decoration:none;
}

/*wie verhält sich der link auf seiner seite*/
a.menuactiv {
 display:block;
 margin:2px;
 padding:3px;
 border:1px solid #ffffff;
 background-color:transparent;
 text-align:left;
 color:#ffffff;
 text-decoration:none;
}

a.menuactiv:link, a.menuactiv:visited {
 background-color:transparent;
 border:1px solid #ffffff;
 text-align:left;
 color:#ffffff;
 text-decoration:none;
}

a.menuactiv:hover {
 background-color:transparent;
 border:1px solid #ffffff;
 text-align:left;
 color:#ffffff;
 text-decoration:none;
}

/*wie verhalten sich links in der unternavigation; a:link, a:visited und a:hover fürs untermenü*/
a.sub {
 display:inline;
 padding:0px;
 margin:0px;
 text-align:left;
 color:#333333;
 text-decoration:none;
}

a.sub:link, a.sub:visited {
 text-align:left;
 color:#333333;
 text-decoration:none;
}

a.sub:hover {
 text-align:left;
 color:#ffffff;
 text-decoration:none;
}

/*h1-h3 zum formatieren*/
h1 {
 font-size:9px;
 color:#666666;
 font-weight:normal;
 margin-bottom:0px;
}

h2 {
 font-size:9px;
 color:#666666;
 font-weight:bold;
 margin-bottom:0px;
}

h3 {
 font-size:15px;
 color:#ffffff;
 font-weight:bold;
 margin-bottom:0px;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<meta name="language" content="de">
<meta name="keywords" content="abcde">
<meta name="description" content="abcde">
<meta name="author" content="abcde">
<meta name="copyright" content="abcde">
<meta name="reply-to" content="abcde@abc.at" >
<meta name="robots" content="index">
<meta name="document-type" content="Web Page">
<link rel="stylesheet" type="text/css" href="neu2.css">
</head>

<body>
<!-- äusserster bereich -->
<div id="aussenrum">
<!-- container für flash-datei -->
<div id="titel">titel</div>
<!--container für navigation -->
<div id="menu">
<div class="menucontainer">
 <a class="menuactiv" href="#">Neues</a>
    <a class="menu" href="#">Archiv</a>
    <a class="menu" href="#">Media</a>
    <a class="menu" href="#">Forum</a>
    <a class="menu" href="#">Eventkalender</a>
    <a class="menu" href="#">Kontakt</a>
 <a class="menu" href="#">Links</a>
    <a class="menu" href="#">Sponsoren</a>
    <a class="menu" href="#">AGB's</a>
</div>
</div>

<div id="mittelbereich">
<!-- container für mittelbereich -->

<!-- container für untermenü -->
<div id="untermenu">
<div class="untermenucontainer">
 <a class="sub" href="#">[ Flyer ]</a>
    <a class="sub" href="#">[ Tickets ]</a>
    <a class="sub" href="#">[ Location ]</a>
</div>
</div>
<div id="content">
<!-- verschachteltes div für text im mittelbereich -->
<div id="imcontent">
<h3>Ich bin eine Überschrift</h3><br>
text
</div>

</div>
<!-- mittelbereich end-tag -->
</div>
<!-- äusserster bereich end-tag -->
</div>

</body>
</html>