✔ Footer folgt nicht dem Content

Status
Nicht offen für weitere Antworten.
Precifix

Precifix

Mitglied
Hallo,

unter http://www.dummtuech.de/23/ könnt Ihr mein Problem sehen.
Der Footer ist anfangs schön am unteren Seitenende positioniert. Aber sobald der Content größer als das Browserfenster ist bleibt der Footer an seiner ürsprünglichen Position und der Content läuft darunter weiter :/
Es wäre großartig wenn der Footer IMMER unten klebt.

Ich hab sämtliche Suchen durchforstet und mir zich Male den Code zerschossen, ich werd bekloppt!

Vielleicht könnt Ihr mir helfen. Danke

der CSS Code des Footer divs:
HTML: 
<body>
<div id="page">


<div id="header">

<div id="navigation">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="150" height="33" align="center" valign="middle" background="/images/nav-norm.gif" class="navnorm">&nbsp;</td>
        <td width="70" height="33" align="center" valign="middle" class="active" >
       		   <div><a class="navlinkfarbe" href="index.php">Home</a></div></td>
        <td width="70" height="33" align="center" valign="middle" class="navnorm" 
               onmouseover="this.className='hoverin';" onMouseOut="this.className='hoverout';">
               <div><a class="navlinkfarbe" href="aktuelles.php">Aktuelles</a></div></td>
        <td width="55" height="33" align="center" valign="middle" class="navnorm" 
               onmouseover="this.className='hoverin';" onMouseOut="this.className='hoverout';">
               <div><a class="navlinkfarbe" href="team.php">Team</a></div></td>
        <td width="57" height="33" align="center" valign="middle" class="navnorm" 
               onmouseover="this.className='hoverin';" onMouseOut="this.className='hoverout';">
               <div><a class="navlinkfarbe" href="kurse.php">Kurse</a></div></td>
        <td width="79" height="33" align="center" valign="middle" class="navnorm" 
               onmouseover="this.className='hoverin';" onMouseOut="this.className='hoverout';">
              <div> <a class="navlinkfarbe" href="therapien.php">Therapien</a></div></td>
        <td width="133" height="33" align="center" valign="middle" class="navnorm" 
               onmouseover="this.className='hoverin';" onMouseOut="this.className='hoverout';">
              <div> <a class="navlinkfarbe" href="bewegdich.php">&quot;beweg Dich e.V&quot;</a></div></td>
        <td width="110" height="33" align="center" valign="middle" class="navnorm" 
               onmouseover="this.className='hoverin';" onMouseOut="this.className='hoverout';">
              <div> <a class="navlinkfarbe" href="firmenkunden.php">Firmenkunden</a></div></td>
        <td width="64" height="33" align="center" valign="middle" class="navnorm" 
               onmouseover="this.className='hoverin';" onMouseOut="this.className='hoverout';">
              <div> <a class="navlinkfarbe" href="kontakt.php">Kontakt</a></div></td>
        <td width="381" height="33" align="center" valign="middle" background="/images/nav-norm.gif" class="navnorm">&nbsp;</td>
      </tr>
    </table>
  </div>

</div>


<div id="content">

  <table width="100%" style="height:100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="200" align="center" valign="top">
      
      <div id="submenue">
      
      <strong>Submenülinks</strong><br />
      <br />
      <a href="#" class="subnavlink">Link1</a><br />
      <a href="#" class="subnavlink">Link2</a><br />
      <a href="#" class="subnavlink">Link3</a><br />
      <a href="#" class="subnavlink">Link4</a><br />
      <a href="#" class="subnavlink">Link5</a><br />
      <br />
      
      <div id="partnerrahmen"><strong>Koorparationen<br />
      </strong><br />
        <a href="#" class="subnavlink">sasas</a><br />
        <a href="#" class="subnavlink">aas</a><br />
        <a href="#" class="subnavlink">asas</a><br />
        <a href="#" class="subnavlink">dfd        </a></div>
      </div>
      
      </td>
      <td width="690" align="left" valign="top"><p>x</p>
        <p>x</p>
        <p>x</p>
        <p>x</p>
        <p>x</p>
        <p>x</p>
        <p>x</p>
        <p>x</p>
        <p>x</p>
        <p>x</p>
        <p>x</p>
        <p>x</p>
        <p>x</p>
        <p>x</p>
        <p>x</p>
        <p>x</p>
        <p>x</p></td>
      <td style="background-repeat:repeat-x;" background="images/background-endless.jpg">&nbsp;</td>
    </tr>
  </table>
</div>

<div id="footer">muuuuuuuuuuuuh</div>

</div>
</body>

und hier der CSS Code:
HTML: 
html,body {
height: 100%;
}

#page {
	height: 100%; /* das hier für den ie */
}

/* folgende anweisung wird nicht vom ie interpretiert */

#page[id] {
    height:auto;
    min-height:100%;
}
	
html
{
	height:100%;
	margin:0;
	padding:0;
}
	
body
{
	height:100%;
	margin:0;
	padding:0;
}

#page
{
	width: 100%;
	margin: 0 auto;
	min-height:100%;
	position: relative;
}

/* Content Div */
#content
{
	position: relative;
	top: 0px;
	background-image: url(images/background.jpg);
	background-repeat: no-repeat;
	height: 400px;
}
#inhaltsdiv
{
	position: relative;
	top: 70px;
	height:300px;
}

/* Header Div */
#header
{
	padding:0;
	text-align:left;
	position: relative;
	background-image:url(images/head-bg.jpg);
	height:68px;
}

/* Footer Div */
#footer
{
	position:absolute;
	background-image:url(images/footer-bg.jpg);
	background-color:#ccc;
	margin: 0 auto;
	width: 100%;
	clear: both; 
	bottom: 0px;
	height: 18px;
	font-family: Arial, Helvetica, sans-serif;
	color: #CCCCCC;
	text-decoration: none;
	word-spacing: normal;
	text-align: center;
	letter-spacing: 2px;
	line-height: 18px;
	font-size: 0.6em;
	font-style: normal;
}

/* Navigation Div */
#navigation {
	position:relative;
	left:0px;
	top:35px;
	width:100%;
	height:33px;
	max-height:33px;
	overflow:hidden;
}
 
/* Submenü Div */
#submenue {
	position:relative;
	left:0px;
	top:120px;
	width: 180px;
	height:300px;
	font-family:Georgia, "Times New Roman", Times, serif;
	color: #666666;
	font-style:italic;
	text-decoration: none;
	word-spacing: 0.1em;
	text-align: center;
	letter-spacing: 1px;
	line-height: 1em;
	font-size: 0.7em;
	overflow: visible;
	
}

#partnerrahmen {
	position:relative;
	left: 10px;
	width:115px;
	border: 10px solid #f4f4f4;
	padding: 10px;
	font-family: Arial;
	color: #666666;
	text-decoration: none;
	word-spacing: 0.1em;
	text-align: center;
	overflow: visible;
}
#contentrahmen {
	position:relative;
	left: 10px;
	width:115px;
	border: 10px solid #f4f4f4;
	padding: 10px;
	font-family: Arial;
	color: #666666;
	text-decoration: none;
	word-spacing: 0.1em;
	text-align: center;
	overflow: visible;
}
 
Hi,

das liegt an der height:400px-Deklaration für das DIV #content, die von den modernen Browser als fixe Höhe behandelt wird. Der IE hingegen sieht sie als "Mindesthöhe" an und dehnt das Element bei zunehmenden Inhalt in der Vertikalen aus, womit der Footer in ihm auch nach unten wandert.

Ergo: richte mit der min-height-Eigenschaft eine Mindesthöhe für das Element ein:

Code: 
#content
{
        position: relative;
        top: 0px;
        background-image: url(images/background.jpg);
        background-repeat: no-repeat;
        height: 400px;
}

#content[id] {
        height:auto;
        min-height:400px;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück