Home/ Questions/Q 6170855
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T23:06:44+00:00

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

  • 0

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 element, 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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.)

    • 0