100% Höhe BG Firefox != IE

Status
Nicht offen für weitere Antworten.

morgenstern

Erfahrenes Mitglied
Hallo Leute!

Ich bin gerade dabei meine Siete zu erstellen. Bin gerade beim CSS-Code angekommen und habe nun folgendes Problem:

Mein Content ist 700px breit, zentriert und 100% hoch. Wenn der Text jetzt länger als die Bildschimrgröße ist, also wenn ich scrollen muss, hört irgendwann der BG auf und auch die Border. Dies geschieht bei mir jedoch nur im Firefox, im IE klappt es.

Hier einmal mein Code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
html {
   height: 100%;
} 
body {
	margin-left:0px;
	padding:0px;
	background-image: url(bg.gif);
	background-attachment:fixed;
	text-align:center;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	height: 100%;
}
#content {
text-align:left;
width:700px; 
height:100%;
min-height:100%;
margin:auto;
padding:0px;
border-right: 1px solid #777777;
border-left: 1px solid #777777;
background-image: url(test.jpg);
background-repeat: repeat;
}
-->
</style></head>

<body>

<div id="content">
<img src="neu.jpg" /><br />
sdsdsdsd<br />
as<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

</div>

</body>
</html>

Hat wer hierfür eine Lösung für den Firefox? Dies könnte ich dann per IE-hack einbaun.

Vielen Dank!
 
Setze mal folgende Regel für das DIV #content ein, und genau in dieser Reihenfolge:

Code:
min-height: 100%; /* Für moderne Browser */
height: auto !important; /* Für moderne Browser */
height: 100%; /* Für IE */
 
Status
Nicht offen für weitere Antworten.
Zurück