CSS, Fixed background is repeating in Firefox. [Archive]

Click to See Complete Forum and Search --> : CSS, Fixed background is repeating in Firefox.

TSSPat

12-15-2007, 06:32 PM

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 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&hl=en&geocode=&time=&date=&ttype=&q=145+davis+st+sarnia+ontario&sll=37.0625,-95.677068&sspn=46.630055,117.421875&ie=UTF8&ll=42.978467,-82.402611&spn=0.005291,0.014334&z=14&iwloc=addr&om=1&output=embed&s=AARTsJpnUm4JT86aZmj-VBU-VEaTGIKzdg"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&hl=en&geocode=&time=&date=&ttype=&q=145+davis+st+sarnia+ontario&sll=37.0625,-95.677068&sspn=46.630055,117.421875&ie=UTF8&ll=42.978467,-82.402611&spn=0.005291,0.014334&z=14&iwloc=addr&om=1&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.

WebJoel

12-15-2007, 06:47 PM

body
{background: url(http://www.threeanchors.ca/graphics/index/index_r3_c4.jpg) no-repeat fixed} Try this. Exactly as written. This should work.

ray326

12-16-2007, 12:44 AM

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fthreeanchors.ca%2F

TSSPat

12-16-2007, 11:13 AM

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?

WebJoel

12-16-2007, 03:44 PM

I'm still trying to figure out what you are trying to do 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=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&hl=en&geocode=&time=&date=&ttype=&q=145+davis+st+sarnia+ontario&sll=37.0625,-95.677068&sspn=46.630055,117.421875&ie=UTF8&ll=42.978467,-82.402611&spn=0.005291,0.014334&z=14&iwloc=addr&om=1&output=embed&s=AARTsJpnUm4JT86aZmj-VBU-VEaTGIKzdg">
</iframe>
<br />
<small><a href="http://maps.google.com/maps?f=q&hl=en&geocode=&time=&date=&ttype=&q=145+davis+st+sarnia+ontario&sll=37.0625,-95.677068&sspn=46.630055,117.421875&ie=UTF8&ll=42.978467,-82.402611&spn=0.005291,0.014334&z=14&iwloc=addr&om=1&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..

TSSPat

12-16-2007, 05:41 PM

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.

WebJoel

12-16-2007, 06:41 PM

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