Background image works in Firefox but not IE
 

Hi all need some help with my background image, at the present my live shop is version 4.0.19 i have my own image as a background which remains still as you scroll up and down the page.

Iam in the process of building a new shop using the latest version of xcart 4.1.8, my url for my
new cart that iam building is - http://www.gezawear.com/testcart

For some strange reason the background image remains still in Firefox as i want it to, but when i checked in IE 6 the image scrolls with the page which i don't want it to.

In version 4.1.8 i edited the same templet as i did in version 4.0.19
In CSS file (skin1.css) the orginal code was this
I then changed the code to this as i did in version 4.0.19 But for some reason it only works in firefox in the new xcart version 4.1.8 but doesn't work in IE. My live shop v4.0.19 http://www.gezawear.com it work perfect both in firefox and IE.
The background is surpose to remain still whilst you scroll up and down a page.

Could any please advise or help with this, many thanks for your time.

Dean

Re: Background image works in Firefox but not IE
 

This may fix your problem

background-attachment: fixed; remove this

Re: Background image works in Firefox but not IE
 

Also FYI, NEVER use a hard-coded link, especially to https as that will slow your whole site down. Proper code is:

background: url(images/man7.jpg);

And put the image in skin1/images.

Re: Background image works in Firefox but not IE
 

Hi guys

Many thanks for the help ive removed the line

and now it also packs up in firefox as well, i need the imagine to remain fixed and not scroll with the page.

Thanks balinor

I will changed the code so it not a hard code link

Re: Background image works in Firefox but not IE
 

Hi Balinor

Have changed code to -

background: url(images/man7.jpg);

Thanks for that advice, have just checked again now i have put -

background-attachment: fixed;

back into the code and the image once again remains fixed in firefox as i wan't it to but again scrolls with the page in IE which i don't wan't to happen.
So puzzling as in cart version 4.0.19 it works in both firefox and IE...

Re: Background image works in Firefox but not IE
 

try this instead. Didn't understand your problem the first time.

background-attachment: scroll;

Re: Background image works in Firefox but not IE
 

Hi Spence

Sorry thats not sorted the problem, what i need is for the image to remain fixed and not move when your scrolling up and down a page.

If you go to my live store -
http://www.gezawear.com
scroll to the bottom of the page and back up again you'll see that the background image remains still/fixed
If you check this in firefox and IE the image remains fixed whilst scrolling up and down.

Then if you go to my new cart iam working on -
http://www.gezawear.com/testcart
Try it in firefox first, you will see the background image remains fixed whilst scrolling.
Then if you try the same url but in IE the image scrolls up and down and doesn't remain fixed which isn't what i want it to do.

There obvisouly something defferent between v4.0.19 and v4.1.8 which is causing this.

Iam greatful for you help on this, regards Dean

Re: Background image works in Firefox but not IE
 

try seperating the html and body tags in the css file

right now you have html, body, ie:

html, body { css stuff goes here including the background }

so try having one for html and one for body, ie:

html { css stuff goes here, but not the background }
body { background stuff goes here }

background-attachment fixed will only work in the body tag for IE

Re: Background image works in Firefox but not IE
 

Hi inebriate

Thanks for your help, iam not an expert on coding only really basic html can you confirm if this is what i need to do -


I will give this ago and report back if it worked or not, presumimh i done it correct.

Many thanks again Dean

Re: Background image works in Firefox but not IE
 

Hi inebriate

Unfortunatly the code above didn't work i actually lost my back ground picture, presuming i done it correct, what i have also tried is this -


My background image came back, but still the same problem it worked in firefox but not
in IE.

really appricate your help thanks Dean

Re: Background image works in Firefox but not IE
 

Try removing this from your CSS:
IE has a bug where it resets the background-attachment: fixed when it sees a background-color.

Re: Background image works in Firefox but not IE
 

Hi Geckoday

Thanks for your help, i tried the above what you said unfortunatly didn't make a difference.

Just to clarify my code at present looks like this

And i removed the code -
And ive left this code out, so strange that it work fine in v4.0.19 but not in the new xcart v4.1.8

Thanks again guys for helping me Dean

Re: Background image works in Firefox but not IE
 

You've got an html comment in your css that is making ie barf. get rid of <! -- was here dean --> and it starts working. You also have other css errors and should run it through a validator and clean it up.

Whoops sorry, go confused switching back and forth between firefox & IE. Still doesn't work.

Re: Background image works in Firefox but not IE
 

Hmm your site is working fine for me in both FireFox 2.0.0.6 and IE 7... The Background picture stays where it is while the foreground scrolls.

Re: Background image works in Firefox but not IE
 

The HTML generated from you test site has duplicated <HTML> <HEAD> and <BODY> tags starting around line 283. Clean up your HTML and see if things start working. Use a validator!

Re: Background image works in Firefox but not IE
 

background-attachment:fixed was fixed in IE7

Re: Background image works in Firefox but not IE
 

Hi Guys

Thank you all for your help and input on this, this was interesting i was using IE 6 so i upgraded to IE7 and hey presto its sorted the problem out, i only usualy use firefox but like to check in different browsers to make sure things look right.
Iam going to get a html validator to check for errors etc as i only have basic html knowlegde.

My only real concern is what if some customers are still using IE 6 they will see the orginal problem, it looks great to me know ive updated to IE 7 so i need to try and find a fix
for this that will work in IE 6

Does anyone know why i don't have this problem with my live site which is v4.0.19 as it works fine even using IE 6, to me its something in the new xcart version that is different from the old one.

Again guys your help as been so greatful.

Thanks Dean

Re: Background image works in Firefox but not IE
 

Hi All

Well ive took all advice ive cleaned the html as best as i could and removed the 2 lots of
<HTML> <HEAD> and <BODY> tags that i had and a few other minor things i could find.

It still works using IE 7 so i un-installed it back to IE 6 and the problem is still there ????

All help appreciated, thanks Dean

Re: Background image works in Firefox but not IE
 

OK, the problem is the new HTML includes an XHTML doctype which causes IE 6 to behave differently. With that doctype it does not like two body style definitions in your css (at least as regards background-attachment working).

You need to remove BODY from this:
and copy the font-family, color and font-size down to your body definition with the background-image in it.

Re: Background image works in Firefox but not IE
 

Hi geckoday

Thanks for your help ive tried what you said above but still no joy, i removed the BODY so it know looks like this.
And added the font family etc to the body defination as you said, presuming ive done it correct, so it looks like this


Still hasn't fixed the problem unfortuantly, appreciate your help.

Regards Dean

Re: Background image works in Firefox but not IE
 

Have you tried this(without the background-repeat: no-repeat; line:



- MoonDog -

Re: Background image works in Firefox but not IE
 

Sorry, I had made two changes in my testing and forgot. Moving the font-family, etc. isn't needed. The real problem is the HTML,BODY{ needs to be just BODY{

Re: Background image works in Firefox but not IE
 

Hi Guys

Well i first tried removing the line

Still no joy with that.

Also removed Family font etc so my code looks like this know

But still no joy with this either, what a mind boggler this one is specialy since there isn't a problem with version 4.0.19

Thanks again Guys Dean

Re: Background image works in Firefox but not IE
 

Ugh. Its acting a bit flakey. That change works sometimes on my machine with a local copy of your home page. It seems to work consistently with the DOCTYPE line removed from the HTML. Not sure if that will break any of the new X-Cart HTML in 4.1 though.

Re: Background image works in Firefox but not IE
 

Hi geckoday

Thanks for that i removed the lines


from my /customer/home.tpl and yes it worked a charm seemed to do the trick, like you said though will it break any of the new X-Cart HTML in 4.1

I also changed my code slightly and removed

To

Ok you get 2 lots of background images scrolling up but better than seeing a sudden white area were the image ends, but not the real out come i wish for.

I'd definitely like help with information regarding the DOCTYPE as this made a big difference and the image worked as i wanted it to, but does it do harm to the new xcart 4.1 html etc

Thanks again for you help, really appreciated..

Re: Background image works in Firefox but not IE
 

Hi Guys

Ok something strange ive just found out by accident, the image doesn't work correctly on my main home page and scrolls up which i don't want it to, BUT if you click on a catergory the image works and remains fixed whilst you can scroll up and down, ive also checked this out through checkout and it all works perfect.

So for some reason it just doesn't want to work on the main front home page !!
If worse came to worse i could change my code to say -

background-repeat: repeat;

At least this would only effect my front page and i don't think to many people would notice the double image as the scroll down etc, could someone just confirm that they are getting the same effect as me if they click on a catagory the image remains fixed...

Iam noticing as well when you click away from the home page i.e on a catergory or view cart etc, on the bottom left iam getting the yellow triange
"error on page" can you guys confirm this for me please....

Again guys you've been so much help, cheers to all....

Re: Background image works in Firefox but not IE
 

managed to clear the yellow triangle "error on page" was something i'd done wrong

Re: Background image works in Firefox but not IE
 

a1deano,

The source view of your home page shows two open <body> and two closing </body> tags. This might also cause the scrolling problem, because 'background' was an attribute of the body tag.
I viewed the source of a couple of products files from the category menu, it shows them all having one set of body tags. And these pages seems to working OK (no scrolling problem).

Now, when you go to your regular site (not the testsite) and you view the source file of the homepage, it actually shows three opening <body> tags and only two closing </body> tags. And yet, this page seems to be working OK and does not have the scrolling problem.

Out of curiosity, place an extra <body> tag right before this line of code that's on your problem site:


just to see if the problem goes away. This is bad programming practice, but it's a start to see where the problem might be, and just correct it from there if it was the problem.

I'm really curious to know what might be causing this problem.

- MoonDog -

Re: Background image works in Firefox but not IE
 

Hi moondog

many thanks for your message, i tried adding anothing another <body> but still no joy on that
one either, thanks anyway

Dean

Re: Background image works in Firefox but not IE
 

Hi all well ive just removed the line
and know the image is remaining fixed in IE 6 as i wanted.

What i need to know by removing the DOCTYPE will this effect the running of xcart.

Many thanks Dean

Re: Background image works in Firefox but not IE
 

Hi all

well all ive done is make the -

background-repeat: no-repeat;

to

background-repeat: repeat;

at least theres no white image, it works ok in IE7 and Firefox just not correct in IE6

Thanks all for your previous input.....