I am creating a WordPress-based site which has a couple of very fundamental jQuery-animated effects.

After I turn JavaScript off within the browser, the website is displayed all right. With JavaScript on, there's only a blank page.

I experienced my custom js file, removing clips of code and checking the website every time, to isolate the issue. I came across, these two apparently innocent lines make the disappearance from the website:

$('#wrapper, #topmask').animate({top: "15%"}, 1300); 
$('#bottommask').animate({bottom: "15%"}, 1300); 

With one of these two lines eliminate, the website is displayed. When they're put in place, the website vanishes (only in IE7).

Possibly I ought to include that (to the very best of my understanding) the custom js file is registered properly, via WordPress's wordpress_enque method, and Firebug shows no errors. Also, after i range from the same code simply inside a mind portion of the page, rather than signing up it as being a custom exterior script, it's exactly the same effect: baby wipes the page in IE7 only.

Had anybody experienced such problem before? What is the effective solution? I'd be thankful for help!


I had been wishing to locate somebody that experienced similar problem, regrettably nobody appears to understand the answer, by now. I wound up using JavaScript to disable JavaScript during my page for IE7 only. How to switch off JavaScript programmatically only for Internet Explorer 7? – because of the truly amazing the aid of multiple people, and particularly from http://stackoverflow.com/users/34397/slaks

Use Firebug with Opera, or perhaps in Chrome or Safar or IE8, make use of the developer tools to determine what's loading in your site and find out the CSS for action.

You may want to use conditional comments to give IE7 its very own stylesheet http://codex.wordpress.org/Conditional_Comment_CSS to possibly show a rather different layout. You may even have to decide if you wish to support IE7.