background image not showing up in Firefox but showing in other browsers!

Hi there

I'm building a three column layout site and need to have a background image [repeat-y] covering the three columns so that the left column is filled with colour as the page content expands. I've taken the idea from the 'faux columns' idea oon the A List Apart site and adapted it, but it won't work in certain browsers.

On the MAC - the bg image doesn't show up in Netscape
On the PC - the bg image doesn't show up in Firefox or Netscape.

Can anyone see anything wrong in my CSS code? Or know if this is a browser bug with a certain fix as I've not come accross this problem before. I have other background-images in the code which show up fine and dandy.

The area to concentrate on is the innercontainer div which holds all three columns. within inner container I have another two divs - leftcolumns, which contains the left column 'subnavs' and the middle column 'pagecontent' and rightcolum which is the third column on the right. The innercontainer div holds the background image that is not showing up - subnav_bg_rpt.

/* CSS Document */

body {
	margin: 0px;
	text-align:center;
	font-size: small;
	background-color:#dff0f3;
	color:#999999;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	background-image: url(assets/elements/page_bg_rpt.jpg);
	background-repeat: repeat-y;
	background-position: 50% 0;
}

/* MAIN CONTENT */
/* THIS CONTAINS THE THREE COLUMNS */
#outercontainer {
	margin: 0 auto;
	width: 760px;
	text-align: left;
}

/* HEADER AREA ############################################################################################# */
#toplinks{
	margin: 0px 15px 0px 10px;
	padding-top: 24px;
	height: 65px;
	text-align: right;
	font-size: 80%;
	background-color:#FFFFFF;
	color: #948aad;
	background-image:url(assets/elements/scott_timber_group_logo.gif);
	background-repeat: no-repeat;
	background-position: top left;
}
/* box model hack start */
#toplinks {
	width:760px;
	voice-family: "\"}\""; 
	voice-family:inherit;
 	width: 735px;
}
html>body #toplinks {
	width:735px;
}
/* box model hack end */


/* THIS GOVERNS THE PRIMARY NAVIGATION ###################################################################### */
#primarynav{
	margin: 0px 10px 0px 10px;
	text-align: left;
}
/* box model hack start */
#primarynav {
	width:760px;
	voice-family: "\"}\""; 
	voice-family:inherit;
 	width: 740px;
}
html>body #primarynav {
	width:740px;
}
/* box model hack end */


/* THIS CONTAINS THE IMAGE HEADER GRAPHICS ###################################################################### */
#imagebar{
	margin: 0px 15px 0px 15px;
	text-align: left;
}
/* box model hack start */
#imagebar {
	width:760px;
	voice-family: "\"}\""; 
	voice-family:inherit;
 	width: 730px;
}
html>body #imagebar {
	width:730px;
}
/* box model hack end */


/* GENERIC CLEAR FOR FLOATED DIVS ###################################################################### */
.divclear{
	clear: both;
}


/* INNERCONTAINER FOR THE LEFT AND RIGHT ELEMENTS ###################################################### */
#innercontainer{
	background-image: url(assets/elements/subnav_bg_rpt.gif);
	background-repeat: repeat-y;
	margin: 0 auto;
	width: 740px;
	text-align: left;	
}

/* COLUMNSLEFT CONTAINS THE LEFT SUBNAVS AND THE MIDDLE PANEL PAGECONTENT ###################################### */
#columnsleft {
	float: left;
	padding: 0px 0px 0px 5px;
}
/* box model hack start */
#columnsleft {
	width:550px;
	voice-family: "\"}\""; 
	voice-family:inherit;
 	width: 545px;
}
html>body #columnsleft {
	width:545px;
}
/* box model hack end */


/* SUBNAV IN LEFT COLUMN ###################################################################### */
#subnavs{
	width: 130px;
	float: left;
}

.subnav{
	margin: 0px;
	width: 130px;
}

/* PAGECONTENT IN THE MIDDLE COLUMN ###################################################################### */
#pagecontent{
	width: 395px;
	float: right;
}


/* DIVS FOR THE RIGHT COLUMN - FEATURED LINKS ############################################################## */
#columnright {
	float: right;
	text-align: right;
	margin: 0px;
	padding: 0px 5px 0px 0px;
}
/* box model hack start */
#columnright {
	width: 190px;
	voice-family: "\"}\""; 
	voice-family:inherit;
 	width: 185px;
}
html>body #columnright {
	width:185px;
}
/* box model hack end */

.featured{
	margin: 0px;
	width: 185px;
}

/* FOOTER ELEMENTS ###################################################################### */
#footer{
	width: 730px;
	margin: 0 auto;	
	padding-top: 10px;
}

#base{
	width: 730px;
	margin: 0 auto;
}

Code (markup):

My XHTML is here:

<!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" />
<link href="layout.css" rel="stylesheet" type="text/css" title="default" />
<title>Untitled Document</title>
</head>

<body>

<div id="outercontainer">

	<div id="toplinks">contact details | accessibility | sitemap | links | keep me updated</div>
	
	<div id="primarynav"><img src="assets/elements/curves.gif" alt="" width="215" height="27" /><img src="assets/nav/home_off.gif" alt="Home" width="64" height="27" /><img src="assets/nav/pallets_off.gif" alt="Pallets" width="79" height="27" /><img src="assets/nav/packaging_off.gif" alt="Packaging" width="96" height="27" /><img src="assets/nav/waste_off.gif" alt="Waste" width="69" height="27" /><img src="assets/nav/reconditioned_off.gif" alt="Reconditioned" width="123" height="27" /><img src="assets/nav/partners_off.gif" alt="Partners" width="94" height="27" />	</div>
	
	<div id="imagebar"><img src="assets/elements/strapline.jpg" alt="Europe's leading manufacturer of quality pallets" width="730" height="38" /><img src="images/temp_header_image.jpg" width="730" height="113" /></div>
	
<div id="innercontainer">

	<div id="columnsleft">
	
		<div id="subnavs">
		<img src="assets/headers/scott_timber.gif" alt="Scott Timber" width="130" height="34" />
			<div class="subnav"><img src="assets/subnavs/home_aboutus_off.gif" alt="About Us" width="130" height="25" /></div>
			<div class="subnav"><img src="assets/subnavs/home_awards_off.gif" alt="Awards" width="130" height="25" /></div>
			<div class="subnav"><img src="assets/subnavs/home_history_off.gif" alt="History" width="130" height="25" /></div>
			<div class="subnav"><img src="assets/subnavs/home_people_off.gif" alt="People" width="130" height="25" /></div>
			<div class="subnav"><img src="assets/subnavs/home_uknetwork_off.gif" alt="Uk Network" width="130" height="25" /></div>
			<div class="subnav"><img src="assets/subnavs/home_orders_off.gif" alt="Orders" width="130" height="25" /></div>
			<div class="subnav"><img src="assets/subnavs/home_ispm15_off.gif" alt="ISPM15" width="130" height="25" /></div>
			<div class="subnav"><img src="assets/subnavs/home_latestnews_off.gif" alt="Latest News" width="130" height="25" /></div>
		</div>
		
		<div id="pagecontent">
		CONTENT
		</div>
		
		<div class="divclear"></div>
	</div>

	<div id="columnright">
		<img src="assets/headers/featured_links.gif" alt="Featured Links" width="185" height="34" />
		<div class="featured"><img src="assets/featured/newpallets_off.gif" alt="New Pallets" width="185" height="110" /></div>
		<div class="featured"><img src="assets/featured/reconditioned_off.gif" alt="Reconditioned Pallets" width="185" height="110" /></div>
		<div class="featured"><img src="assets/featured/woodwaste_off.gif" alt="Wood Waste" width="185" height="110" /></div>
		<div class="featured"><img src="assets/featured/packaging_off.gif" alt="Packaging" width="185" height="110" /></div>
		<div class="featured"><img src="assets/featured/agricultural_services.gif" alt="Agricultural Services" width="185" height="100" /></div>
	</div>
	
	<div class="divclear"></div>
</div>	
		
<div id="footer"><img src="assets/footer/scott.gif" alt="Scott" /><img src="assets/footer/scott_timber_off.jpg" alt="Scott Timber" /><img src="assets/footer/scott_packaging_off.jpg" alt="Scott Packaging" /><img src="assets/footer/scott_waste_off.jpg" alt="Scott Waste" /><img src="assets/footer/scott_recycling_off.jpg" alt="Scott Recycling" /></div>

<div id="base"><img src="assets/footer/gradient.jpg" alt=" " /></div>
</div>

</body>
</html>

Code (markup):

 

Might want to try the fully quailified address for the bdackground image within your CSS. Good luck...

 

that is the full address for the background image

 

A link to the layout would be much handier to visualise the problem

 

OK...but this is a temp URL and I will take the example down once I've got this resolved as it's work for a client and should only sit on their server.

http://www.eskymo.co.uk/dev/scotttimber/layout1.html

but they want a solution to this issue too so they're fine about it.

 

This page appears the same for me in FF and IE on the PC.

 

What do you see?

As my firefox shows no - background image - this is on a PC

And on the Mac - the same happens in Netscpe

 

All looks good for me too on IE6 and FF1.5.

 

I've got FF 1.0.7 - I'll upgrade and try.

 

Sorry eskymo, your last post wasn't there when I posted.

I saved the page locally so that the images in the CSS would be missing (so I can see what that looks like). I see the same in IE and FF, both show the background images when viewing the url you provided. I'm running Windows XP SP2

 

thanks for your comments. I just upgraded firefox to 1.5 and i can see the background image now. But I still have a problem with the following two browsers on the MAC:

Netscape v7.1 and v7.2
Internet Explorer 5.2

Any idea of how to get it working in these browsers. I guess upgrading to the latest netscape might work, but I can't try that right now as my MAC isn't connected at the moment.

 

Well frankly it's not worth supporting these browsers because hardly anyone still uses it. Do you have any statistiscs on the potential visitors for your website?

 

I totally agree with you, but been asked to test on the Mac for explorer, netscape, firefox, and safari. I stated in my quote that I will be testing on the latest versions of all these browsers, and so I think my only issue will the Explorer, which is now a redundant browser as far as I'm concerend especially as Microsoft has stopped support for it and stopped oferring a download to it as of this month.

Try explaining that to a graphic designer [the client] who wants his design to work, and look the same in every browser though. Oh how I hate this kind of job!

 

Oh that sure is annoying :/

Well I'm afraid I can't help you with this because I neither have Netscape or a Mac to test it.

Maybe search through http://www.positioniseverything.com/, they have quite a lot of articles on css and browser bugs/quircks.

 

thanks for the tip - I'll check that link out.

I think I'm going to put my foot down and explain the nature of the web to the designer again - feels like hitting my head against a brick wall, but has to be done until he understands.

Thanks for all your help, as far as I'm concerned this case is closed now, and I'm just getting on with building the actual site.

Cheers