Question

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

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 jQuery, Animate opacity to 1 then remove the opacity property to make it better looking on IE