Text extra aliased(jagged) in IE - looks terrible - but OK in FF and Chrome

Question

I am building a website - http://www.efficaxdevelopment.com

As you can see when you load the page(in IE) the text on the page that isn't an image or the menu looks terrible, while in FF and Chrome the text looks fine.

you can view the source on the page and the css is here http://www.efficaxdevelopment.com/styles/mainstyle.css

Also, the sliding bar over the menu appears a few pixels left of where it appears in FF and IE. Any ideas?

Answer 1

Could be similar to http://stackoverflow.com/questions/778208/jquery-fadein-leaves-text-not-anti-aliased-in-ie7

Seems there is a known bug in IE when using jQuery fades. http://malsup.com/jquery/cycle/cleartype.html

Answer 2

The fix is to add a background color to the elements that contain the text.