Forum Moderators: not2easy
We are working on page design but we are having trouble with a background image used in a DIV tag in firefox.
It displays fine in IE, but on Firefox (Safari too) it does not display.
The HTML & CSS validate. We must be missing something.
The code is pretty simple:
<body>
<div id="wrapper">
<div id="pagehed"></div>
<div id="pagebody">
<div id="content">
<p>content is here.</p>
</div>
</div>
<div id="footer2">
<p>Footer text here </p>
</div>
</div>
</body>
The CSS is:
body { font-family: 'Lucida Grande', 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;
background: #b1c8bb url(../imgs/bck.jpg) repeat;
margin: 0px;
}
#wrapper {padding: 0;
position: relative;
margin: 0 auto;
text-align: left;
width: 714px;
}
#pagehed
{background-image:url(../imgs/2hed.gif);
background-color:#F5F3ED;
padding:0px;
height: 90px;
position: relative;
top: 0em;
width: 714px;
}
#pagebody{
width: 714px;
background: #b1c8bb url(../imgs/2cont.gif) repeat-y center;
padding: 0px;
float: left;
}
#content
{width: 450px;
padding:0px 18px 0px 10px;}
#footer2
{width:714px;
height:48px;
color:#3A5A6F;
background:#b1c8bb url(../imgs/footer2.gif) no-repeat center;
font-size:9px;
padding:0px;}
#footer2 p
{margin: 0 0 0 12px;
padding: 20px 0 0 0;
font-size:9px;
}
Has anyone else had this happen?
Suggestions?
Any help is much appreciated.
[edited by: SuzyUK at 9:50 am (utc) on July 15, 2006]
If the problem is with the #pagehed div the reason is that the background image is being over-ridden by the following background-color.
#pagehed {
background-image:url(../imgs/2hed.gif);
background-color:#F5F3ED;
...}
The preferred solution is to use the short method as you did in the other <div>s CSS:
#pagehed {
background:#F5F3ED url(../imgs/2hed.gif);
...}
or list the background-image after the background-color.
The trouble is with the 'footer2' div tag. the pagehed tag is working fine.
'Footer2' is the one with the missing background image. Again, its fine on IE (so my link is working), I'm just missing something on Firefox.
