CSS gradients in IE7 & IE8 is causing text to become aliased

Question

I\'m attempting to use a CSS gradient in a div containing some text. With Gecko and Webkit, the text displays fine. In IE7 & IE8 the text appears aliased (jaggy).

Answer 1

Yes, that's a problem with IEx.

Try using a solid background color:

/*replace #ccc with the color you want*/
background: url(images/gradient-image.png) top repeat-x #ccc 

Now, no need to use the expression "...stuffing a repeating background image", since there's nothing wrong with using a background image and repeat it, we should be thankful that we can not only do that, but we can repeat it in X and Y.

Of course, you want to make your repeating background image as efficient as possible, so make it small/thin (depending on your design) and use it, rest assured, you are not doing anything wrong or against any standards or best practices.