nicht angemeldet
Background-Problem bei Div
Hallo
ich habe gerade ein kleines Problemm mit CSS bei meiner ersten Seite die auf div-layern basiert.
Seite: mastereder.de
Problem: im Firefox wird in Content und in der rechten Spalte kein Hintergrundbild angezeigt, beim Internet Explorer wird der Hintergrund angezeigt.
Grüße Eder
body{
margin:0px;
padding:0px;
text-align: center;
}
/* Raster und Struktur */
#container{
width: 700px;
height: 100%;
margin-left: auto;
margin-right: auto;
background-image: url(/templates/mastereder/images/content_bg_700x3.gif);
background-repeat: repeat-y;
}
#pageHeader{
width: 700px;
height: 193px;
background: url(/templates/mastereder/images/head_700x193.gif) top;
background-repeat:no-repeat;
}
#nav{
width: 700px;
height: 17px;
background-image: url(/templates/mastereder/images/nav_bg_700x17.gif);
background-repeat:no-repeat;
}
#content{
width: 500px;
float: left;
}
#right{
width: 200px;
float: left;
}
#footer{
width: 700px;
height: 17px;
float: left;
background: url(/templates/mastereder/images/nav_bg_700x17.gif);
background-repeat:no-repeat;
color: #C6C6C6;
text-align: center;
font-size: small;
}
HTML:
<body>
<div id="container">
<div id="pageHeader">
</div>
<div id="nav">
</div>
<div id="content">
<?php mosMainBody(); ?>
</div>
<div id="right">
<?php mosLoadModules ( 'right' ); ?>
</div>
<div id="footer">(c)2007 masterEder
</div>
</div>
</body>
-
Hallo,
Problem: im Firefox wird in Content und in der rechten Spalte kein Hintergrundbild angezeigt, beim Internet Explorer wird der Hintergrund angezeigt.
Ja, die gerenderte Höhe des DIV#container ist so hoch wie DIV#pageHeader. Du gibst zwar 100% vor, diese beziehen sich aber auf die Höhe von BODY und diese auf die Höhe von HTML, welche nicht definiert sind. Alle Elemente, außer DIV#pageHeader, sind per float aus dem Elementfluss genommen, so dass sie die Höhe des sie umgebenden Elements nicht beeinflussen.
#footer{
...
float: left;
...
}
Wozu das float:left im DIV#footer gut sein? Nimm das mal raus und setze dort stattdessen clear:both hin. Damit zwingst Du das DIV#footer dazu, sich nicht mehr an vorherigen floats zu orientieren und damit auch den Elementfluss wiederherzustellen.
viele Grüße
Axel
-
danke, hat funktioniert :D
-