2

I made a CSS class that applies a gradient and rounded corners to a span element to act as a button. It seems to work in most browsers that I've tested, but IE9 is giving me some issues. As the class is now the rounded corners aren't working correctly. However if you look very close it seems like there are rounded corners underneath a layer that is not rounded (I think that's the best way to explain how it looks, forgive me if that doesn't make sense)

Anyway, by trial and error I messed with the class until I found that removing the 'display:inline-block;' property allows for the rounded corners to be displayed correctly, but as a result the gradient no longer works. Any ideas?

http://jsfiddle.net/jessikwa/wcgzkkgr/

The HTML:

<span class="action_button">Button</span>

The CSS:

.action_button
{
color: #FFFFFF;
font-size: 12px;
font-family: arial;
cursor: pointer;
text-decoration: none;
padding: 3px 5px;
display: inline-block;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
border: 1px solid #f7a03b;
webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: #8b8b8b 0px 1px 4px;
-moz-box-shadow: #8b8b8b 0px 1px 4px;
box-shadow: #8b8b8b 0px 1px 4px;
background-color: #efbb7f;
background-image: -webkit-gradient(linear, left top, left bottom, from(#efbb7f), to(#f88600));
background-image: -webkit-linear-gradient(top, #efbb7f, #f88600);
background-image: -moz-linear-gradient(top, #efbb7f, #f88600);
background-image: -ms-linear-gradient(top, #efbb7f, #f88600);
background-image: -o-linear-gradient(top, #efbb7f, #f88600);
background-image: linear-gradient(to bottom, #efbb7f, #f88600);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#efbb7f, endColorstr=#f88600);
}

Update: Further reading of other posts in StackOverflow gets me a bit closer, but still not quite right.

IE9 border-radius and background gradient bleeding

This post's answer suggestions using an image, which I would prefer to avoid. Another proposed answer of the thread puts a wrapper around the button with "overflow:hidden;", but this doesn't seem to be quite right, either.

http://jsfiddle.net/uu19uqg4/

Community
  • 1
  • 1
jessikwa
  • 750
  • 1
  • 8
  • 23

2 Answers2

1

you have forgot the "-" near webkit-border-radius

try this :

-webkit-border-radius: 3px;

this link can be usefull

Maxime Caboche
  • 49
  • 5
  • 1
    And what is the point of `-webkit` while the question is about IE9? – Hashem Qolami Aug 19 '14 at 12:20
  • @Maxime Caboche - Ah, thanks. I fixed it now, but it does't effect the isuse I'm having. – jessikwa Aug 19 '14 at 12:29
  • As Hashem pointed out that's not the issue since the prefix -webkit- will target all webkit browsers. Which include: Chrome and Safari and many others less popular ones: http://trac.webkit.org/wiki/Applications%20using%20WebKit – Alessandro Incarnati Aug 19 '14 at 12:29
  • @Hashem Qolami - Although this question is geared at IE9, I'm trying to develop for other browsers as well. I simply copy and pasted the code directly from my source, my apologies if it caused any confusion. – jessikwa Aug 19 '14 at 12:30
  • @jessikwa No problem. This could happen to any of us. – Hashem Qolami Aug 19 '14 at 12:37
  • @jessikwa Besides, the W3C standard declaration of `border-radius` has a wide support in Webkit-based web browsers. Therefore it'll override the one having `-webkit-...` or the invalid one `webkit-...`. – Hashem Qolami Aug 19 '14 at 12:46
  • @HashemQolami Yes that makes sense, despite the typo the button worked regardless in a variety of other browsers. Thanks for the info – jessikwa Aug 19 '14 at 12:49
-1

Add the following in the head of the page.

<meta http-equiv="X-UA-Compatible" content="IE=7,IE=8,IE=9" />

This will disable the compatibility mode in IE9. If it's due to compatibility issue then it will be solved.

Leo
  • 5,017
  • 6
  • 32
  • 55