Background image works in Firefox but not IE

geckoday · #11 09-07-2007, 06:03 AM

Try removing this from your CSS:

Code:

BODY.PImage {
    BACKGROUND-COLOR: #FFFFFF;
}

IE has a bug where it resets the background-attachment: fixed when it sees a background-color.

a1deano · #12 09-07-2007, 10:48 AM

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

Quote:

}
HTML,BODY{
background-image: url(images/man7.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
MARGIN: 0px;
PADDING: 0px;
}

And i removed the code -

Quote:

BODY.PImage {
BACKGROUND-COLOR: #FFFFFF;
}

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

geckoday · #13 09-07-2007, 11:26 AM

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.

JTheed · #14 09-07-2007, 11:38 AM

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.

geckoday · #15 09-07-2007, 12:00 PM

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!

inebriate · #16 09-07-2007, 01:59 PM

Quote:

Originally Posted by JTheed

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.

background-attachment:fixed was fixed in IE7

a1deano · #17 09-08-2007, 03:45 AM

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

a1deano · #18 09-08-2007, 08:07 AM

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

geckoday · #19 09-08-2007, 08:42 AM

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:

Code:

BODY,DIV,TH,TD,P,INPUT,SELECT,TEXTAREA,TT {
    FONT-FAMILY: Verdana, Arial, Helvetica, Sans-serif;
    COLOR: #2c3e49;
    FONT-SIZE: 11px;
}

and copy the font-family, color and font-size down to your body definition with the background-image in it.

a1deano · #20 09-08-2007, 09:05 AM

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.

Quote:

DIV,TH,TD,P,INPUT,SELECT,TEXTAREA,TT {
FONT-FAMILY: Verdana, Arial, Helvetica, Sans-serif;
COLOR: #2c3e49;
FONT-SIZE: 11px;
}

And added the font family etc to the body defination as you said, presuming ive done it correct, so it looks like this

Quote:

HTML,BODY{
FONT-FAMILY: Verdana, Arial, Helvetica, Sans-serif;
COLOR: #2c3e49;
FONT-SIZE: 11px;
background-image: url(images/man7.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
MARGIN: 0px;
PADDING: 0px;
}

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

Regards Dean