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

eskymo · #1 Jan 18th, 2006, 11:38

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 · #2 Jan 18th, 2006, 11:44

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 · #3 Jan 18th, 2006, 11:48

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 · #4 Jan 18th, 2006, 11:55

is it possible to see the URL?

eskymo · #5 Jan 18th, 2006, 12:02

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 · #6 Jan 18th, 2006, 13:50

Any ideas yet?

Corey Bryant · #7 Jan 18th, 2006, 15:10

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 · #8 Jan 18th, 2006, 15:18

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 · #9 Jan 18th, 2006, 21:38

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 · #10 Jan 18th, 2006, 22:26

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 · #11 Jan 18th, 2006, 23:49

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

eskymo · #12 Jan 19th, 2006, 15:31

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

Corey Bryant · #13 Jan 19th, 2006, 15:35

A PC - Windows XP Professional, SP1

eskymo · #14 Jan 19th, 2006, 15:47

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 · #15 Jan 19th, 2006, 16:10

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 · #16 Jan 19th, 2006, 16:43

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.

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
background image not showing up in Firefox but showing in other browsers!