Images not displayed in Firefox

Discussion in 'CSS' started by Gmorkster, Mar 1, 2009.

  1. #1
    Not sure what I'm doing wrong, attached you will find the views in Chrome vs Firefox. The background image for the header only shows in Chrome, and I can't find the glitch in CSS.

    Thanks in advance for your help! :)

    LE: and the URL: http://gmorkster.info
     

    Attached Files:

    Gmorkster, Mar 1, 2009 IP
  2. rebelagent

    rebelagent Well-Known Member

    Messages:
    876
    Likes Received:
    46
    Best Answers:
    0
    Trophy Points:
    165
    #2
    Can you post the CSS? and the html that specifically affects the header?
     
    rebelagent, Mar 1, 2009 IP
  3. Gmorkster

    Gmorkster Peon

    Messages:
    202
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #3
    The HTML
    <div id="header"> 
    	<div id="caption"> 
    		<div  style="float:left"> 
    			<h1 id="title"><a href="http://gmorkster.info/">Gmorkster</a></h1> 
    			<div id="tagline">A web service provier&#8217;s blog</div> 
    		</div> 
    		<div style="float:right"> <!-- AS Code -->
    		</div> 
    	</div> 
    Code (markup):
    And the CSS

    
    #header {
    	background:url(/wp-content/themes/inove/img/header_footer.jpg) 0 0 no-repeat;
    	height:132px;
    }
    
    #caption {
    	height:44px;
    	padding:25px 30px 21px;
    }
    Code (markup):
     
    Gmorkster, Mar 1, 2009 IP
  4. rebelagent

    rebelagent Well-Known Member

    Messages:
    876
    Likes Received:
    46
    Best Answers:
    0
    Trophy Points:
    165
    #4
    FF is very picky.


    Try adding spaces?
    background:url(/wp-content/themes/inove/img/header_footer.jpg)
    Should be
    background: url(/wp-content/themes/inove/img/header_footer.jpg)

    and i think it may actually be the position issue "0 0"
    You need to create a new CSS line for that

    background-position: 0 0;
    background-repeat: no repeat;
     
    rebelagent, Mar 2, 2009 IP