IE8 - Odd background transparency issue

[Russinating]

View this site build in Firefox/Chrome/Safari: http://v2.idoweddingfilms.co.uk

Now view it in IE8... what is it doing?! It looks lovely, I'm sure, but it's definitely not as intended.

If you don't have IE8 or can't see what I'm talking about, the background to the content 'boxes' is a 1x1 PNG that's basically an 80% transparent white square set to repeat. On normal browsers this is fine, but in IE8 it seems to fade out the background starting from the top left corner, eventually becoming totally transparent in the bottom right (if given enough space).

Seriously... what the hell? It's already set to repeat so how can I fix this?

 

[PaulM]

It appears to be because jQuery is throwing an exception and it's not getting caught, which is then confusing IE8: Error: uncaught exception: Syntax error, unrecognized expression: [@rel^="collapse-"]

If you go to the page with Javascript disabled in IE8 it works as expected.

 

[Russinating]

Hmm, odd. I've just downloaded the latest jQuery to no avail. Javascript isn't my forte, so has anyone got any ideas?

Edit: Quickfixed it by making the background PNG 1x100 pixels rather than 1x1, but would still like to know a proper fix if it's kicking up an error.

 

[Tripnologist]

I don't get any errors in IE8 myself.

However, why aren't you using shorthand for this? The two blocks below do the exact same thing.

background:url(../images/background3.jpg);
background-position:top center;
background-repeat:no-repeat;
background-attachment:fixed;
background-color:#000000;

background:url(../images/background3.jpg) top center no-repeat fixed #000;

 

[Russinating]

However, why aren't you using shorthand for this? The two blocks below do the exact same thing.

Old habits die hard .