jQuery slider and IE6 Issues

Question

I'm having a few issues with our old friend IE6. The site I'm working on is for a public sector client so it has to support IE6. The slider is fine in IE7+, Firefox, Safari and Chrome. I've tried everything that I can think of but I'm drawing a blank! Can you help?

IE6 on a PC.

Chrome on a Mac

Answer 1

I'm seeing an error on the page with ie 6, dubugging the page with the ms script editor leads me to this file:

http://citywest.bangtest.co.uk/sites/all/themes/citywest/inc/js/jquery.custom.js

and this line:

$().newsTicker(options);

I can also tell you that multiple $(document).ready( lines within the same js document is not necessary within that file. You should consolidate those statements.

Ie6 doesn't provide a great way to debug, but since ie6 is saying you've got an error on that line, it's good place to start looking.

Answer 2

Don't code for IE 6. It's an obsolete browser and the last operating system it shipped with was Windows XP. Some of the newer code just doesn't work well with IE6. If you do get it to work, you have to create hacks for it to display code correctly and spend numerous hours doing so. Code for IE8 and Firefox3+, use javascript to detect the browser version and a message to go update their browser.

Answer 3

I can't help but jump to the old "IE6 hasLayout" issue (since this appears to be a visual bug). It might be worth your time to check your elements to assure that they have "hasLayout" - most rendering problems I've run into for IE6 that "make no sense" relate back to this property.

http://www.satzansatz.de/cssd/onhavinglayout.html

A quick and dirty way to see if the problem relates to "hasLayout" is to add the non-standard, IE proprietary CSS property "zoom: 1;". This will NOT validate, but it will grant "hasLayout" to any element to which it's applied. Just put it on all the elements involved, and it might fix the issue... Then, armed with the awful solution, you can figure out how to make it validate :)

/* in your css */
.my_box {
    zoom: 1;
}