CSS Jquery - When I change background color the text becomes fuzzy in IE6 ?

Question

Hey guys

I was playing around with this script of auto scrolling text. You can check out the code here:

http://jqueryfordesigners.com/simple-jquery-spy-effect/

Then I changed the background color to white - and all the text started looking fuzzy and messed up - If I change it to any light color - it appears all messy.

This is the portion where I changed the background color in the code:

#sidebar {
    color: grey;
    background: #FFF;
    float:left;
    margin:0 0 24px;
    padding:15px 10px 10px;
    width:500px;
}

I have noticed this in one other site even on IE7. Any idea why a simple change in background color messes up the text.

I used IE tested to test on IE6 browser http://www.my-debugbar.com/wiki/IETester/HomePage

Thanks

Answer 1

because ie6 sucks!

Answer 2

Are you certain you're not using IE css filters in an element further up the tree, such as alpha transparency? They can make text blurry/fuzzy when ClearType (font smoothing on LCD monitors) is enabled, especially for bolded text, so much so that cleartype was disabled for elements which use CSS filters in IE7+.

See also http://blogs.msdn.com/ie/archive/2006/08/31/730887.aspx

EDIT: Here's an example of what you could do to remove the filter after the items have first faded in:

// increase the height of the NEW first item
$insert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);

might go to

// increase the height of the NEW first item
$insert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000,
    function() {
        if ($.browser.msie) {
            $(this).get(0).style.removeAttribute('filter');
        }
    });

See also http://stackoverflow.com/questions/2603961/jquery-animate-opacity-to-1-then-remove-the-opacity-property-to-make-it-better-l

Answer 3

I will finish the David M Question. You have to remove the IE CSS Filter property.

I see that you are using jQuery.

If you are using fadeIn, fadeOut and fadeTo functions, add this to your code:

(function($) {
$.fn.FadeIn = function(speed, callback) {
$(this).fadeIn(speed, function() {
if(!$.support.opacity)
$(this).get(0).style.removeAttribute('filter');
if(callback != undefined)
callback();
});
};
$.fn.FadeOut = function(speed, callback) {
$(this).fadeOut(speed, function() {
if(!$.support.opacity)
$(this).get(0).style.removeAttribute('filter');
if(callback != undefined)
callback();
});
};
$.fn.FadeTo = function(speed,to,callback) {
return this.animate({opacity: to}, speed, function() {
if (to == 1 && jQuery.browser.msie())
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};
})(jQuery); 

And replace (fadeIn, fadeOut, fadeTo) to (FadeIn, FadeOut, FadeTo). (the difference is on the F)

Otherwise use:

$(selector).removeAttribute('filter');

If you need some more info comment my answer and i will edit it :) I think this is what you want. Sorry for my english. :(