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

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.