Border-radius properties do not work in IE9?

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

  • DavidAllen
    replied
    also - you can use
    Code:
    border-radius:0 0 5px 5px;
    bit less typing

    Leave a comment:


  • Ben Stones
    replied
    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!

    Leave a comment:


  • DavidAllen
    replied
    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

    Leave a comment:


  • Ben Stones
    started a topic Border-radius properties do not work in IE9?

    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;
    }
Working...
X