✔ DIV Background Problem

Status
Nicht offen für weitere Antworten.
U

uran

Mitglied
DIV Hintergrundbild Problem

Hi,
Ich hab auf einer Seite ein Problem mit einem DIV-Hintergrund.

Im Internet-Explorer wird es korrekt angezeigt und in allen anderen Browsern wird er gar nicht angezeigt.

HTML-Code-Auszug:
HTML: 
<div id="fuss">
<div id="fussinhalt">
blablabla
</div>
</div>

CSS-Code-Auszug:
Code: 
#fuss {
	height: 77px;
	width: 780px;
	background-image: url(../images/footer1_bg.gif);
	z-index: 4;
}

#fussinhalt {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #666666;
	text-decoration: none;
	clear: right;
	float: right;
	height: 78px;
	width: 600px;
	text-align: right;
}

Danke für eure Hilfe.
 
Zuletzt bearbeitet:
Hi,

die gezeigten Quellcode-Ausschnitte funktionieren in allen mir zur Verfügung stehenden Browsern einwandfrei, will sagen, das Hintergrundbild wird in allen angezeigt.

Meine Testumgebung: Win2k Prof. SP4, Firefox 2.0.0.3, IE6, Mozilla 1.7.12, Netscape 7.0, Opera 9.1 und SeaMonkey 1.0.5
 
Ich kopier dir mal den ganzen Code hier rein. Eventuell hab ich irgendwo anders was falsch gemacht das ers nicht darstellt in allen anderen Browsern.


HTML-Code:
Code: 
<div align="center">
  	<div id="grundrahmen">
    			<div id="logo">
						<div id="navspacer"></div>
						<div id="navstartseite"><a href="index.php?action=startseite"></a></div>
						<div id="navneueste"><a href="index.php?action=neueste"></a></div>
						<div id="navweingut"><a href="index.php?action=weingut"></a></div>
						<div id="navweine"><a href="index.php?action=weine"></a></div>
						<div id="navleiningerland"><a href="index.php?action=leiningerhof"></a></div>
						<div id="navbestellung"><a href="index.php?action=bestellung"></a></div>
						<div id="navkontakt"><a href="index.php?action=kontakt"></a></div>
						<div id="navweinfreunde"><a href="index.php?action=weinfreunde"></a></div>
						<div id="navimpressum"><a href="index.php?action=impressum"></a></div>
	  			</div>
				<div id="inhalt">
	  					<?
						switch($action){
						case "startseite": include ("startseite.php"); break;
						case "neueste": include ("neueste.php"); break;
											default: include ("startseite.php");}
						?>
				</div>
				<div id="fuss">
				  <div id="fussinhalt">
				<br />
				<br />
				<br />
				blabla</div>
</div>
	<div id="fuss2"><img src="images/footer2.gif" alt="--" /></div>
</div>	
	</div>

CSS-Code:
Code: 
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-image: url(../images/hintergrund.gif);
	background-repeat: repeat-y;
	background-position: center;
	background-color: #FFFFFF;

}

/* START - NAVIGATION */

#navstartseite a{
	height: 20px;
	width: 192px;
	float: left;
	overflow: visible;
	clear: left;
	display:block;
	background-image:url(../images/nav_startseite_off.gif);
}
 
#navstartseite a:hover {
	background-image:url(../images/nav_startseite_on.gif);
}

#navneueste a{
	height: 20px;
	width: 192px;
	float: left;
	overflow: visible;
	clear: left;
	display:block;
    background-image:url(../images/nav_neueste_off.gif);
}
 
#navneueste a:hover {
	background-image:url(../images/nav_neueste_on.gif);
}

#navweingut a{
	height: 20px;
	width: 192px;
	float: left;
	overflow: visible;
	clear: left;
	display:block;
    background-image:url(../images/nav_weingut_off.gif);
}
 
#navweingut a:hover {
	background-image:url(../images/nav_weingut_on.gif);
}

#navweine a{
	height: 20px;
	width: 192px;
	float: left;
	overflow: visible;
	clear: left;
	display:block;
    background-image:url(../images/nav_weine_off.gif);
}
 
#navweine a:hover {
	background-image:url(../images/nav_weine_on.gif);
}

#navleiningerland a{
	height: 20px;
	width: 192px;
	float: left;
	overflow: visible;
	clear: left;
	display:block;
    background-image:url(../images/nav_leiningerland_off.gif);
}
 
#navleiningerland a:hover {
	background-image:url(../images/nav_leiningerland_on.gif);
	
}
#navbestellung a{
	height: 20px;
	width: 192px;
	float: left;
	overflow: visible;
	clear: left;
	display:block;
    background-image:url(../images/nav_bestellung_off.gif);
}
 
#navbestellung a:hover {
	background-image:url(../images/nav_bestellung_on.gif);
}

#navkontakt a{
	height: 20px;
	width: 192px;
	float: left;
	overflow: visible;
	clear: left;
	display:block;
    background-image:url(../images/nav_kontakt_off.gif);
}
 
#navkontakt a:hover {
	background-image:url(../images/nav_kontakt_on.gif);
}

#navweinfreunde a{
	height: 20px;
	width: 192px;
	float: left;
	overflow: visible;
	clear: left;
	display:block;
    background-image:url(../images/nav_weinfreunde_off.gif);

}
 
#navweinfreunde a:hover {
	background-image:url(../images/nav_weinfreunde_on.gif);
}

#navimpressum a{
	height: 20px;
	width: 192px;
	float: left;
	overflow: visible;
	clear: left;
	display:block;
    background-image:url(../images/nav_impressum_off.gif);
}
 
#navimpressum a:hover {
	background-image:url(../images/nav_impressum_on.gif);
}

/* ENDE - NAVIGATION */

#grundrahmen {
	height: 500px;
	width: 780px;
}
#logo {
	height: 187px;
	width: 192px;
	float: left;
	background-image: url(../images/logo.gif);
}

#inhalt {
	width: 588px;
	float: right;
	text-align: left;
}

#fuss {
	height: 77px;
	width: 780px;
	display:block;
	background-image: url(../images/footer1_bg.gif);
}

#fussinhalt {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #666666;
	text-decoration: none;
	clear: right;
	float: right;
	height: 77px;
	width: 600px;
	text-align: right;
}

#fuss2 {
	height: 10px;
	width: 100%;
	float: none;
}
#navspacer {
	height: 200px;
	width: 192px;
}
 
Versuch mal Folgendes:

Code: 
#logo {
        min-height: 187px;
        height: auto !important;
        height: 187px;
        width: 192px;
        float: left;
        background-image: url(../images/logo.gif);
}

#fuss {
        height: 77px;
        width: 780px;
        display:block;
        background-image: url(../images/footer1_bg.gif);
        clear: both;
}

#fussinhalt {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 9px;
        color: #666666;
        text-decoration: none;
        float:right;
        height: 77px;
        width: 600px;
        text-align: right;
}
Du hast nämlich für das DIV logo eine feste Höhe von 187px bestimmt, die der IE als "Mindesthöhe" interpretiert, aber die modernen Browser eben als fixen Wert ansehen. Nun zwängst du in dieses DIV ein "spacer"-DIV mit 200px Höhe, was eben in den nicht-IE-Browsern dazu führt, dass die Box nicht nach unten "ausgedehnt" wird. Aus diesem Grund habe ich mal mit der min-height-Eigenschaft eine Mindesthöhe für diese Box eingerichtet.

Der zweite Grund ist die falsch gesetzte clear-Eigenschaft, die im DIV fuss erforderlich ist.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück