Databases
StackOverflow2013
Postsdbo
POWhy is my green button showing up as white in IE?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy is my green button showing up as white in IE?
    text
    copied!<p>I have a green button that I've generated this css for:</p> <pre><code>.lime_button { -moz-box-shadow:inset 0px 1px 0px 0px #d9fbbe; -webkit-box-shadow:inset 0px 1px 0px 0px #d9fbbe; box-shadow:inset 0px 1px 0px 0px #d9fbbe; background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #b8e356), color-stop(1, #a5bb52)); background:-moz-linear-gradient(center top, #b8e356 5%, #a5bb52 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b8e356', endColorstr='#a5bb52'); background-image: -moz-linear-gradient(top, #b8e356 0%, #a5bb52 100%); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#B8E356), to(#A5BB52)); background-color:#b8356; -webkit-border-top-left-radius:0px; -moz-border-radius-topleft:0px; border-top-left-radius:0px; -webkit-border-top-right-radius:0px; -moz-border-radius-topright:0px; border-top-right-radius:0px; -webkit-border-bottom-right-radius:0px; -moz-border-radius-bottomright:0px; border-bottom-right-radius:0px; -webkit-border-bottom-left-radius:0px; -moz-border-radius-bottomleft:0px; border-bottom-left-radius:0px; text-indent:0; display:inline-block; color:#ffffff; font-family:Arial; font-size:17px; font-weight:bold; font-style:normal; height:50px; line-height:50px; width:300px; text-decoration:none; text-align:center; text-shadow:1px 1px 0px #86ae47; } .lime_button:hover { background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #a5cc52), color-stop(1, #b8e356)); background:-moz-linear-gradient(center top, #a5cc52 5%, #b8e356 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a5cc52', endColorstr='#b8e356'); background-color:#a5cc52; } .lime_button:active { position:relative; top:1px; } </code></pre> <p>In <strong>Chrome</strong> it looks fine:</p> <p><img src="https://i.stack.imgur.com/oxP8u.png" alt="Chrome rendering"></p> <p>But in <strong>IE10</strong> it comes out white:</p> <p><img src="https://i.stack.imgur.com/4gFfp.png" alt="IE10 rendering"></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload