Question

I have a button created with CSS that works great in Firefox and Chrome but not IE…

Not sure what is wrong but I assume there is some missing or wrong code. Here is my code:

.red-button{ 
 width: 400px;
 height: 100px;
 line-height: 100px;
 color: white;
 text-decoration: none;
 font-size: 20px;
 font-family: "ff-dagny-web-pro", Helvetica, Arial, sans-serif;
 font-weight: bold;
 display: block;
 text-align: center;
 position: relative; 
border: 1px double black;
border-radius: 10px;
background-image: -webkit-gradient(linear, center top, center bottom, 
                  from(#e80000),   to(#840000));
background-image: -webkit-linear-gradient(top, #e80000, #840000);
background-image: -moz-linear-gradient(top, #e80000, #840000);
background-image: -o-linear-gradient(top, #e80000, #840000);
background-image: -ms-linear-gradient(top, #e80000, #840000);
background-image: linear-gradient(to bottom, #e80000, #840000);
text-shadow: 1px 1px 1px black;
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.75);
-moz-box-shadow: 0 1px 5px rgba(0,0,0,0.75);
box-shadow: 0 1px 5px rgba(0,0,0,0.75);
}

I want this to work in IE 9 and IE 8. While I know properties like border radius will not work in IE 8 I do want the gradients to work in IE 8 and 9.

Please Help, Thanks!

Answer 1

I found a site that creates the code and is very useful and handy.

Here is the correct code:

background: #e80000; /* Old browsers */
background: -moz-linear-gradient(top, #e80000 0%, #840000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e80000), color-stop(100%,#840000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e80000 0%,#840000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e80000 0%,#840000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e80000 0%,#840000 100%); /* IE10+ */
background: linear-gradient(to bottom, #e80000 0%,#840000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e80000', endColorstr='#840000',GradientType=0 ); /* IE6-9 */

The site has a note about IE 9:

Support for full multi-stop gradients with IE9 (using SVG).

Add a "gradient" class to all your elements that have a gradient, and add the following override to your HTML to complete the IE9 support:

<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
      filter: none;
    }
  </style>
<![endif]-->

IE 9 code with full multi-stop gradients with IE9 (using SVG):

/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U4MDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4NDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

/* Code as Above */