1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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

Discussion in 'CSS' started by eskymo, Jan 18, 2006.

  1. #1
    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.
    SEMrush
    
    /* 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):
     
    eskymo, Jan 18, 2006 IP
    SEMrush
  2. ServerUnion

    ServerUnion Peon

    Messages:
    3,615
    Likes Received:
    297
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Might want to try the fully quailified address for the bdackground image within your CSS. Good luck...
     
    ServerUnion, Jan 18, 2006 IP
  3. eskymo

    eskymo Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    that is the full address for the background image
     
    eskymo, Jan 18, 2006 IP
  4. Instromaniac

    Instromaniac Peon

    Messages:
    48
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    A link to the layout would be much handier to visualise the problem :)
     
    Instromaniac, Jan 18, 2006 IP
  5. eskymo

    eskymo Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    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.
     
    eskymo, Jan 18, 2006 IP
  6. FeelLikeANut

    FeelLikeANut Peon

    Messages:
    330
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    0
    #6
    FeelLikeANut, Jan 18, 2006 IP
  7. eskymo

    eskymo Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    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
     
    eskymo, Jan 18, 2006 IP
  8. draculus

    draculus Peon

    Messages:
    63
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #8
    All looks good for me too on IE6 and FF1.5.
     
    draculus, Jan 18, 2006 IP
  9. eskymo

    eskymo Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    I've got FF 1.0.7 - I'll upgrade and try.
     
    eskymo, Jan 18, 2006 IP
  10. draculus

    draculus Peon

    Messages:
    63
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #10
    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
     
    draculus, Jan 18, 2006 IP
  11. eskymo

    eskymo Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    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.
     
    eskymo, Jan 18, 2006 IP
  12. Instromaniac

    Instromaniac Peon

    Messages:
    48
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #12
    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?
     
    Instromaniac, Jan 19, 2006 IP
  13. eskymo

    eskymo Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    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!
     
    eskymo, Jan 19, 2006 IP
  14. Instromaniac

    Instromaniac Peon

    Messages:
    48
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #14
    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.
     
    Instromaniac, Jan 19, 2006 IP
  15. eskymo

    eskymo Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #15
    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
     
    eskymo, Jan 19, 2006 IP