IE7 space issue in string with jQuery

Question

I created a text effect using jquery, which is working fine in all browsers except IE7

You can see the effect here: http://jaspreetkaur.com/chatter/ used for text "get to the chatter that matters".

I found that following condition is always true in IE7 (it's never going in else part of the condition or not comparing the space character)

for (var i=str.length-1; i>=0; i--) {
    if (str[i] != ' ') {
        $(this).prepend("<span class='c" + i + "'>&nbsp;</span>");
    } else {
        $(this).prepend("<span class='nobg'>&nbsp;</span>");
    }
}

str variable contains the string "get to the chatter that matters".

Also appearance of the text is different in IE7, i am not sure if it's a problem in CSS. I am not able to figure it out till now.

Thanks.

Answer 1

IE7 doesn't allow you to access characters in that manner: JavaScript access string chars as array

If you actually try outputting str[i] you will get undefined each time. Perhaps try:

if (str.charAt(i) != ' ') {

Also, the text difference is because text-shadow is being used which is, again, not supported by IE7.