IE 7 gradient filters are changing text color

I have the following CSS on a button (there's other styles as well):

border: 1px solid #86A74B; border-top: 1px solid #B0C5B0;
background-color: #91B248;
background-image: -moz-linear-gradient(top, #9BBC52, #84A440);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #9BBC52),color-stop(1, #84A440));
background-image: -webkit-linear-gradient(#9BBC52, #84A440); /* Chrome 10+, Saf6 */
background-image: linear-gradient(top, #9BBC52, #84A440);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#9BBC52', EndColorStr='#84A440'); /* IE6–IE9 */

When I view this button in IE7, it displays the text using the dark background-color of the body el开发者_JAVA技巧ement, which is about 5 layers back! I have tried getting rid of the text-shadow and specifying a color but nothing seems to work.

What's the deal with IE 7 and how can I get these buttons to consistently render their text in white?

I was struggling with the same issue for the past 5 hours, found this: http://www.bennadel.com/blog/1354-The-Power-Of-ZOOM-Fixing-CSS-Issues-In-Internet-Explorer.htm added position: relative; zoom: 1; to the text tag and tag for the gradient worked like a charm. (probably not the best solution but after 5 hours I am done.)

The above answer is really effective for me. Unlike you, I have been struggling with this for 2 days now. It is really irritating when you zoom in or zoom out, the text links loses their text colors.

#menu li a{ position: relative; zoom: 1; }

fixes that. Thank you!