Rounded corners not working in IE9

Question

As far as I am aware, IE9 should have CSS support for rounded corners. I have apparently coded my page in such a way as this does not occur in IE9 though - although it displays correctly in Chrome and FF.

*I have edited CSS to reflect suggestions as per answer below - the problem is still occurring * I need top and bottom left corners only to be rounded for the div that contains the site main navigation.

The 'Activate Now' buttons are also not working, in the hosting package display boxes.

Site link to view is http://activehost.co.nz

I've checked other questions - and the most common cause (using prefixes) is not something I am doing.

Relevant CSS for sections is below.

Navigation:

    #main_nav {
    margin: 0px 0px 10px 0px;
    float: right;
    height: 37px;
    /*background:url(../img/nav_bg.png);
    background-repeat: repeat-x;*/
    background-color: #286e38;
    background-repeat: repeat-x;
    background-image: -khtml-gradient(linear, left top, left bottom, from(#6dc067), to(#286e38));
    background-image: -moz-linear-gradient(top, #6dc067, #286e38);
    background-image: -ms-linear-gradient(top, #6dc067, #286e38);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6dc067), color-stop(100%, #286e38));
    background-image: -webkit-linear-gradient(top, #6dc067, #286e38);
    background-image: -o-linear-gradient(top, #6dc067, #286e38);
    background-image: linear-gradient(top, #6dc067, #286e38);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6dc067', endColorstr='#286e38', GradientType=0);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    border-radius: 20px 0px 0px 20px;
    clear: right;

}

And the CSS for the 'Activate Now buttons:

     .hosting_order {
    position: absolute;
    top: 148px;
    border: none;
    height: 35px !important;
    background-color: #286e38;
    background-repeat: repeat-x;
    background-image: -khtml-gradient(linear, left top, left bottom, from(#6dc067), to(#286e38));
    background-image: -moz-linear-gradient(top, #6dc067, #286e38);
    background-image: -ms-linear-gradient(top, #6dc067, #286e38);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6dc067), color-stop(100%, #286e38));
    background-image: -webkit-linear-gradient(top, #6dc067, #286e38);
    background-image: -o-linear-gradient(top, #6dc067, #286e38);
    background-image: linear-gradient(top, #6dc067, #286e38);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6dc067', endColorstr='#286e38', GradientType=0);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    color: #ffffff;
    width: 120px;
    padding: 0px 20px;
    font-weight: bolder;
    font-size: 1.1em;
    border-radius:20px;
    box-shadow: 2px 2px #888888;
}

The background image CSS is to produce a gradient effect - I wonder if that's the problem?

Answer 1

see this question regarding the meta tag and some other possible issues/process to eliminate: IE9 border-radius

Answer 2

For IE9, you are correct it doesn't like the border radius and the filter combined. Here is what I followed and it worked perfectly in IE9, as well as all the other browsers.

https://github.com/bfintal/jQuery.IE9Gradius.js

Hope that helps!

Answer 3

You only need to define one number for your border radius if you're using "bottom-left" and so on. By specifying two numbers IE9 may not interpret it correctly.

If you use the following, the first number is the top-left, second is top-right, third is bottom-right, and fourth is bottom-left.

    -moz-border-radius: 8px 8px 0px 0px;
    -webkit-border-radius: 8px 8px 0px 0px;
    -0-border-radius: 8px 8px 0px 0px;
    border-radius: 8px 8px 0px 0px;

Answer 4

Making the border radius compatible to IE browsers, follow these steps:

1. Open Setting option in IE.
2. Go to compatibility and view setting.
3. Uncheck "Display intranet sites in Compatibility view " as well as uncheck "Use microsoft compatibility list".

Answer 5

It's because you combine filter and border-radius for same element. Try to apply border-radius to one element, and filter to its child element instead.