I'm encountering an odd issue where my DIV background isn't showing up in Firefox and Chrome, but it looks fine in IE. I've searched on several places like Stackoverflow for solutions to this problem, but none of them have worked for me so far.
There was a suggestion in a forum that it could be related to browser caching or the fact that I'm using Windows XP. I don't think browser caching is the culprit here since I've been testing my page offline, and even when I tested online right after uploading the files, the issue persisted. I haven't had the chance to try it out on a different Windows platform like Vista, but ideally, I want my background image to display consistently across all platforms.
Below are my CSS and source code:
CSS
body {
margin: 0px;
background:url(../images/bground.jpg) fixed bottom;
}
.area {
width:738px;
margin:0 auto;
padding:0 131px;
}
#menu {
width:738px;
height:41px;
position:absolute;
top:273px;
text-align: left;
}
#navlist li {
display: inline;
list-style-type: none;
padding: 0 20px 0 0;
}
#sec-menu {
height:41px;
position:absolute;
right:131px;
top:50px;
text-align: right;
border-bottom:1px solid #bbb
}
#sec-navlist li {
display: inline;
list-style-type: none;
padding: 0 0 0 10px;
}
#register {
position:absolute;
right:131px;
top: 110px;
}
#content {
width:1000px;
position:absolute;
top:273px;
text-align: center;
}Source Code
<body onload="MM_preloadImages('images/register-over.png')">
<div class="area" style="height:343px; background:transparent url('images/header.png') top no-repeat center; position:relative">
<div id="sec-menu">
<ul id="sec-navlist">
<li><a href="#" class="sec-menu">International Faculty</a></li>
<li><a href="#" class="sec-menu">Contact</a></li>
<li><a href="#" class="sec-menu">Sitemap</a></li>
</ul>
</div>
<a href="#"><img src="images/register.png" alt="Register for KLVS 2011 Now!" width="91" height="89" id="register" onmouseover="MM_swapImage('register','','images/register-over.png',1)" onmouseout="MM_swapImgRestore()" /></a>
<div id="menu">
<ul id="navlist">
<li class="menu-active">Home</li>
<li><a href="#" class="menu">About KLVS 2011</a></li>
<li><a href="#" class="menu">Programmes</a></li>
<li><a href="#" class="menu">Accommodation</a></li>
<li><a href="#" class="menu">Exhibitors & Sponsors</a></li>
<li><a href="#" class="menu">Call for Abstract</a></li>
</ul>
</div>
<div class="area" style="background:url(images/transparent-white_12.png) repeat-y"><br />
</div>
The Issue
The 'header.png' image isn't appearing in the first DIV that uses the area class. Another important detail to note is that I apply the same area class to another DIV with a different background image, and that one displays correctly on IE, Firefox, and Chrome. I've attempted to remove position:relative and/or transparent from the first DIV, but the problem persists.
I've validated my file on http://validator.w3.org/ and it passed, so I'm really puzzled about what could be causing this. I hope someone on Stackoverflow can assist me with resolving this.
Thank you.