Jquery not working in ie6

Question

Hi all, I'm quite stuck on this

It's working fine in firefox, chrome, safari, ie8(almost).

But in ie6:

• no mouse interactions work; added like - $("#watch_but_link").mouseup and $("#watch_but_link").mouseover

• some css functions don't work; added like - $("#listen_tab").css("background-position","0px 0px");

There is a whole load of xml parsing and displaying stuff which does seem to be working through.

I've tried executing the script and the bottom of the page as well as having the $(document).ready at the bottom (I read that could help). But it didn't.

The page is here, it's the part of the top navigation under the radio, tv part: http://www.abc.net.au/triplej/default%5Fnowplaying.htm

the script here: /triplej/scripts/triplej.listen.watch.js

Any ideas welcome

Thanks!

Answer 1

Does the problem still happen if you add type="text/javascript" to the respective <script> tag?

As for the CSS functions, try decomposing them so they don't use multi-value properties. Like instead of setting background-position to 0px 0px, set both background-position-top and background-position-left to 0px. Also keep in mind that IE6 had poor support for CSS (compared with more modern browsers) so you may want to check if other properties that are failing to be set with jQuery would be successfully set through normal CSS rules.

Answer 2

You might want to check your program logic as well, and make sure buttonsActive is being set properly. It'd probably be a good idea to use the actual boolean values true and false rather than the strings "true" and "false". IE6, besides having poor CSS support, certainly also has bugs, or at least differences, in the way it evaluates Javascript expressions. Avoiding unlikely-but-syntactically-valid expressions is a good rule of thumb to ensure consistent evaluation.

I've also had more luck with passing a data structure to css() rather than a string. Eg:

    $("#watch_tab").css( { "background-position-top":  "0px",
                           "background-position-left": "0px",
                       } );
    $("#watch_but").css( { "background-image": "" } );

I can't say that I've isolated a particular problem that this syntax fixes, but I and my development team have settled on this syntax after writing a lot of jQuery code and fixing a lot of browser compatibility bugs.

Answer 3

Thanks for the advice and input,

It turns out there is a conflict between an ie png fix that is globally applied accross the site and this script, without it, it works fine.

I'm sure the suggestions here go towards better formatted code so not all lost.

Now just to figure out how to get around this png fix thing.

thanks again.