css button not showing up in any version of IE

Question

I've been having an issue where in Chrome, Firefox, and Safari my website displays css buttons I made at the top. However, in both IE 9 and 11, the button isn't there and only the link is. I've added redundancies in the CSS to the best of my ability, but I must be missing something. The full code for the buttons is fairly long, but I've pinpointed the problem to the following few lines.

.button {
/* effects */
    border-top: 1px solid rgba(255,255,255,0.8);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    background-image: -webkit-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(http://iwantaneff.in/t/http://iwantaneff.in/t/noise.png);
    background-image: -moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(http://iwantaneff.in/t/http://iwantaneff.in/t/noise.png);
    background-image: -ms-radial-gradient(farthest-corner ellipse at top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(http://iwantaneff.in/t/http://iwantaneff.in/t/noise.png);
    background-image: radial-gradient(farthest-corner ellipse at top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(http://iwantaneff.in/t/http://iwantaneff.in/t/noise.png);
    -webkit-transition: background .2s ease-in-out;
    transition: background .2s ease-in-out;
}

And this is the html for the buttons. The classes of round and blue are defined in the stylesheet also, but I've tested the buttons without those additions and they still don't work.

<a role="button" class="button round disabled">Home</a>
<a href="Software.html" role="button" class="button round blue">Software</a>
<a href="Support.html" role="button" class="button">Support</a>
<a href="Consulting.html" role="button" class="button round blue">Consulting Services</a>
<a href="New.html" role="button" class="button round blue">What's New</a>
<a href="Clients.html" role="button" class="button round blue">Our Clients</a>
<a href="About.html" role="button" class="button round blue">About Us</a>
<a href="Contact.html" role="button" class="button round blue">Contact Us</a>

Any recommendations will be appreciated, as I just don't understand why this isn't working in both IE 9 and 11.

radial-gradient doesn't work in IE 9 for sure. http://jsfiddle.net/prLSS/ It works in IE 10 and IE 11. I used http://www.browserstack.com/ for testing. Proof: http://www.browserstack.com/media_asset/fetch?1402519035537 — , Jun 11 '14 at 20:35
Not working in IE 9 makes sense, but I've just tested it on other computers in the office and it isn't working with IE 11. Would it make a difference if I'm running it from the file versus hosting it then viewing it? — xmaslightguy, Jun 11 '14 at 21:47

score 0 · Accepted Answer · edited May 23 '17 at 12:21

Looks like RGBA property with opacity values not working in IE. I just modified your code with removing rgba and assigning two different color. Also i have added display property with height and padding. After that it was working fine for me.

 .button {
/* effects */
border-top: 1px solid rgba(255,255,255,0.8);
border-bottom: 1px solid rgba(0,0,0,0.1);
background-image: -webkit-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(http://iwantaneff.in/t/http://iwantaneff.in/t/noise.png);
background-image: -moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(http://iwantaneff.in/t/http://iwantaneff.in/t/noise.png);
background-image: -ms-radial-gradient(farthest-corner ellipse  at top, #ff00ff 0%, #000fff 100%);
background-image: radial-gradient(farthest-corner ellipse  at top, #ff00ff 0%, #000fff 100%);
-webkit-transition: background .2s ease-in-out;
transition: background .2s ease-in-out;
display:inline-block;
height:50px;
padding:0px 30px;
}

If you want to overcome this issue you need to do some trick. In Stack Overflow already they have discussed about this like how to overcome this. Go through the following url CSS background opacity with rgba not working in IE 8

JSFIDDLE DEMO

css button not showing up in any version of IE

1 Answers1