Border-radius properties do not work in IE9?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Border-radius properties do not work in IE9?

    About Tourette's Syndrome - What is Tourettes, Symptoms of Tourettes, Sterotyping and Resources

    I am trying to use bottom left and bottom right border radiuses on my website, but it doesn't appear to work in IE9, even though MSDN documentation states it is supported? In fact, I have tested it on a basic paragraph HTML element and it won't make rounded corners in IE9? Do I need XHTML strict or something. I have even tried adding the following meta:

    HTML Code:
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    Code:

    #top_menu ul li a
    {
    float: left;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 28px;
    padding-right: 28px;
    color: #FFFFFF;
    background-color: #96bdd8;
    /** START **/
    /* For Mozilla Firefox */
    -moz-border-bottom-left-radius: 4px;
    -moz-border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;

    /* For Rest */
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;

    /** END **/
    text-align: center;
    margin-right: 8px;

    /* Gradients */
    filter: progidXImageTransform.Microsoft.gradient(startColorstr=' #89b0cb', endColorstr='#b1c7d7'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#94c5e7), to(#b8d3e5)); /* for webkit browsers */
    background: -moz-linear-gradient(top, #89b0cb, #b1c7d7); /* for firefox 3.6+ */
    background-image: -o-linear-gradient(top,rgb(137,176,203),rgb(177,199,215));
    /* for opera */
    border-bottom: 1px solid #9dc2dc;
    border-left: 1px solid #9dc2dc;
    border-right: 1px solid #9dc2dc;
    font-size: 10pt;
    }

    #2
    Ben - ie9 doesn't like border radius and gradient border on the same element in my experience. I had to use CSS3pie for ie9 as well as the lesser ieXs
    David Allen - www.serina.co.uk

    Comment


      #3
      Originally posted by DavidAllen View Post
      Ben - ie9 doesn't like border radius and gradient border on the same element in my experience. I had to use CSS3pie for ie9 as well as the lesser ieXs
      I've screwed up the CSS in the process of trying to get it to work, trying to revert my changes - + Z appears not to be making any differences...god knows what I've done. Thanks for your suggestion David!

      Comment


        #4
        also - you can use
        Code:
        border-radius:0 0 5px 5px;
        bit less typing
        David Allen - www.serina.co.uk

        Comment

        Working...
        X