JQuery code obliterates WordPress site in Internet

Question

I'm building a WordPress-based site that has a few very basic jQuery-animated effects.

When I turn JavaScript off in the browser, the site is displayed just fine. With JavaScript on, there's just a blank page.

I went through my custom js file, deleting snippets of code and checking the site each time, to isolate the problem. I discovered, that these two seemingly innocent lines cause the disappearance of the website:

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

With these two lines cut out, the site is displayed. When they are put back in place, the site disappears (but only in IE7).

Perhaps I should also add that (to the best of my knowledge) the custom js file is registered correctly, via WordPress's wp_enque method, and Firebug shows no errors. Also, when I include the same code simply in a head section of the page, instead of registering it as a custom external script, it has the same effect: wipes out the page in IE7 only.

Had anyone experienced such issue before? What could be the effective solution? I would be grateful for help!

---

I was hoping to find someone who experienced similar issue, unfortunately no one seems to know the solution, as of now. I ended up using JavaScript to disable JavaScript in my page for IE7 only. How to switch off JavaScript programmatically only for Internet Explorer 7? – thanks to the great help from several people, and especially from https://stackoverflow.com/users/34397/slaks

Answer 1

Use Firebug with Firefox, or in Chrome or Safar or IE8, use the developer tools to see what's loading on your site and see the CSS in action.

You may need to use conditional comments to feed IE7 its own stylesheet http://codex.wordpress.org/Conditional_Comment_CSS to possibly show a slightly different layout. You may also need to decide if you want to support IE7.