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

[eskymo]

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.

Code: Select all

/* 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;
}

My XHTML is here:

Code: Select all

<!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>

[Corey Bryant]

Since the URL seems to be OK, you might consider adding the apostrophes arund the URL. On the W# Schools site it shows with the apostrophes.

Code: Select all

background-image: url('assets/elements/page_bg_rpt.jpg');

[eskymo]

Hi there

Thanks for the speedy reply...I just tried that and the bg image still doesn't show up. Damn! I thought that would work!

Any other ideas?

[Corey Bryant]

is it possible to see the URL?

[eskymo]

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.

link removed...

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

[eskymo]

Any ideas yet?

[Corey Bryant]

I see the background image on Firefox - at least I think I do. It looks the same on IE and Firefox.

It is the light green image - I would say the hex number is about dbeaef

[eskymo]

There's no green...so don't know where that's coming from. I did originally use a green bg colour when building the layout, but that's been taken out of the CSS now.

The background-image that I want to appear is a 1px high graphic that is 740px wide. it has 5pixels of white then 130px of purple and then the rest of it is white. It it meant to repeat-y to give the left column the effect of having a purple background that matches the height of the right column.

[Corey Bryant]

And it is called page_bg_rpt right? I just did a select to give you the color code. I would not really call it purple myself but the background looks the same in both browsers

[eskymo]

Sorry

Bit of a muddle there. You highlighted the 'page_bg_rpt' earlier and I presumed you were talking about the 'subnav_bg_rpt.gif' that I mentioned in my first post.

I do have a 'page_bg_rpt.jpg - but that's the background for the whole page. The background that I'm talking about is called 'subnav_bg_rpt.gif' which sits within the innercontainer div.

I've attached an image. This is what the site should look like - three columns.

The left one with the purple background image, the middle one white and the right one full of buttons.



The purple area underneath the search box doesn't appear in all browsers and I don't know why.

[Corey Bryant]

The thing is - I see it. Here is a copy in Internet Explorer and Firefox

[eskymo]

Thanks for taking the time and trouble to post up images - much appreciated. Is this on a MAC or PC?

[Corey Bryant]

A PC - Windows XP Professional, SP1

[eskymo]

Thanks for letting me know.

i need to get it working on the Mac now. My client can't see the purple subnav_bg_rpt graphic in Explorer 5.2, netscape and firefox [all on the Mac]. No idea why it's not showing up in these browsers.

An upgrade to the latest version certainly helped getting the problem fixed on the PC.

Any ideas?

[Corey Bryant]

According to Full CSS Property Compatibility Chart the background-image and background-repeat is fully supported.

Maybe he needs to apply some upgrades to his system, but both started with CSS1 so it should be fully supported

[eskymo]

Thanks for the link to that chart - that's amazing!

I really appreciate your comments and totally agree. I can certainly use that to back up my point, as I am dealing with a GRAPHIC designer here, which at times can be rather frustrating as they sometimes don't understand the capabilities or limitations of the web.

[Corey Bryant]

That is very true. Designing it in Adobe Photoshop is very easy to them but making it layout & work in HTML / CSS is a totally different thing.

[eskymo]

Too true!

I vow that after I've finished this job I am no longer going to take on another site designed by a graphic designer, unless I've been invloved in the design process from the word go as it's too much of a nightmare as I always have to go against ALL my principles regarding accessibility and useability and site optimisation.

Every link on this site is an image with an associated rollover image and I'm having to use javascript to govern the rollovers as I just can't get it working with CSS - it was too much of a headache and actually had me in tears!

So I'm grinning and bearing it and just keeping my head down and getting on with it.

I have a meeting tomorrow where I will have to explain yet again that the design will not render EXACTLY the same in html as the designers illustrator file [!] and that it won'r function on certain browsers - not looking forward to that as it's like hitting my head against a brick wall.

I could rant on for longer but I think, case closed, enough said.

thanks for ALL your help - really appreciated.

[Corey Bryant]

Glad I could be of help. But I will say I have this code for the Rollovers that actually might do a good job. I used that on a few sites with no problems.

[eskymo]

Looks quite neat and I presume it deals with the preload of the image as well as the rollover state, so I wouldn't have to have an onload "MM_preloadImages" in my body tag?

What happens if someones had javascript turned off - do the images for the links still load OK and function?

I'm intrigued.

It's my Birthday today and I can't believe that I'm still working! Oh the joy of freelancing!