CODEWITHSUNDEEP
internet-explorercss
L84
L84

Reputation: 46308

CSS Button in IE

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!

Upvotes: 2

Views: 5547

Answers (4)

L84
L84

Reputation: 46308

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 */

Upvotes: 2

user463231
user463231

Reputation:

IE9's support for CSS3 isn't as great as some would have you believe. While it does support css3 it doesn't support the entire spec. CanIuse.com is a great resource for finding out what features different browser versions support.

Sadly, IE9 doesn't support linear gradients so you'd have to use either background images, choose a fallback (solid colour), use a filter, or use a polyfill. Some people have suggested using the Microsoft filter to create linear gradients, and they do work. For most basic sites (ie. not very animation heavy, think jQuery, or full blown web apps) I'd recommend checking out CSS3Pie. It's very simple to setup and allows you to write cleaner css3 and does all the heavy lifting for you. Plus it's supported all the way down to IE6.

Upvotes: 1

cjhveal
cjhveal

Reputation: 5791

Try adding the following filter property:

filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', 
          startColorstr=#FFE80000, endColorstr=#FF840000)

That should work all the way down to IE 5.5, according to this resource.

Upvotes: 2

dzny
dzny

Reputation: 374

IE8 doesn't support those CSS3 declarations, but IE5 through IE8 do support the Filter property.

I've found a nice CSS3 generator that you can use.

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFE80000,EndColorStr=#FF840000);

Upvotes: 1

Related Questions