www.webdeveloper.com
Results 1 to 7 of 7

Thread: CSS, Fixed background is repeating in Firefox.

  1. #1
    Join Date
    Dec 2007
    Posts
    3

    CSS, Fixed background is repeating in Firefox.

    hello everyone.
    just building a website for my restaurant,
    and it so happens that my "fixed" background seems to be repeating in Firefox.

    The image is located on the "Map" page which is loaded into the main iframe on the index page.

    now the website is http://threeanchors.ca.

    the code for the "Map" page is as follows:

    HTML Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Map</title>
    
    <style type="text/css">
    body 
    {
    background-image: 
    url(http://www.threeanchors.ca/graphics/index/index_r3_c4.jpg);
    background-repeat: 
    no-repeat;
    background-attachment: 
    fixed
    }
    </style>
    
    <link href="../threeanchorscss.css" rel="stylesheet" type="text/css" />
    </head>
    
    
    
    <body leftmargin="0" topmargin="0" bgproperties="fixed" marginwidth="0" marginheight="0">
    <div align="center">
      <p><iframe width="400" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;hl=en&amp;geocode=&amp;time=&amp;date=&amp;ttype=&amp;q=145+davis+st+sarnia+ontario&amp;sll=37.0625,-95.677068&amp;sspn=46.630055,117.421875&amp;ie=UTF8&amp;ll=42.978467,-82.402611&amp;spn=0.005291,0.014334&amp;z=14&amp;iwloc=addr&amp;om=1&amp;output=embed&amp;s=AARTsJpnUm4JT86aZmj-VBU-VEaTGIKzdg"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&amp;hl=en&amp;geocode=&amp;time=&amp;date=&amp;ttype=&amp;q=145+davis+st+sarnia+ontario&amp;sll=37.0625,-95.677068&amp;sspn=46.630055,117.421875&amp;ie=UTF8&amp;ll=42.978467,-82.402611&amp;spn=0.005291,0.014334&amp;z=14&amp;iwloc=addr&amp;om=1&amp;source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>
      <p></div>
    </body>
    </html>

    now ive ran this code through a CSS validator and it says its correct. any ideas why thin isnt working? thanks

    Pat.

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    body
    {background: url(http://www.threeanchors.ca/graphics/...dex_r3_c4.jpg) no-repeat fixed}
    Try this. Exactly as written. This should work.
    I build for: Firefox and tweak for IE

  3. #3
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  4. #4
    Join Date
    Dec 2007
    Posts
    3

    Talking

    Quote Originally Posted by WebJoel
    Try this. Exactly as written. This should work.


    Unfortunately writing this code in made the background image dissapear all together.

    Also all of those "errors" in the HTML validation were coding inputted by Dreamweaver cs3's "input flash media" coding. so although they are "errors" thats not my main problem right now. but thanks!

    blah any other idea?

  5. #5
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    I'm still trying to figure out what you are trying to do here...
    HTML Code:
    <!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=utf-8" />
    <title>Map</title>
    <style type="text/css">
    * {margin:0; padding:0;}
    body {background: #fff url(http://www.threeanchors.ca/graphics/index/index_r3_c4.jpg) no-repeat fixed;}
    </style>
    
    <link href="http://threeanchors.ca/threeanchorscss.css" rel="stylesheet" type="text/css" />
    <base href="http://threeanchors.ca/" />
    </head>
    
    <body>
    <div align="center">
    
    <iframe scrolling="no" style="width:400px; height:300px; margin:0 auto;" src="http://maps.google.com/maps?f=q&amp;hl=en&amp;geocode=&amp;time=&amp;date=&amp;ttype=&amp;q=145+davis+st+sarnia+ontario&amp;sll=37.0625,-95.677068&amp;sspn=46.630055,117.421875&amp;ie=UTF8&amp;ll=42.978467,-82.402611&amp;spn=0.005291,0.014334&amp;z=14&amp;iwloc=addr&amp;om=1&amp;output=embed&amp;s=AARTsJpnUm4JT86aZmj-VBU-VEaTGIKzdg">
    </iframe>
    <br />
    <small><a  href="http://maps.google.com/maps?f=q&amp;hl=en&amp;geocode=&amp;time=&amp;date=&amp;ttype=&amp;q=145+davis+st+sarnia+ontario&amp;sll=37.0625,-95.677068&amp;sspn=46.630055,117.421875&amp;ie=UTF8&amp;ll=42.978467,-82.402611&amp;spn=0.005291,0.014334&amp;z=14&amp;iwloc=addr&amp;om=1&amp;source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>
    
    </div>
    </body>
    </html>
    I made some changes but not knowing what you are trying to do, these probably aren't what you're after...
    You may have to actually sketch a picture for me to understand your intent..
    Last edited by WebJoel; 12-16-2007 at 02:48 PM.
    I build for: Firefox and tweak for IE

  6. #6
    Join Date
    Dec 2007
    Posts
    3
    thank you Joel,

    that did exactly what i was wanting! happy holidays to you and everyone else on this amazing webforum and thanks to everyone who helped out, i know ill be back to give help where possible.

    Pat.

  7. #7
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Great.

    -Note that I used the "universal selector" method, * {margin:0; padding:0;}
    This strips ALL default margins and paddings, from every element that can be on a web page. Advantage here is that you do not need to state "margin:0;" or "padding:0;" on any other selector now... I noticed that several selectors had either margin:0, padding:0;, or both.
    This saves you time in writing, and makes the page-weight smaller (less code). And it is a good first step towards making your pages look the same in IE, as they would look in any other browser.

    ..and yes, -this is an amazing web forum!
    I build for: Firefox and tweak for IE

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles