Grow your CSS skills. Land your dream job.

Huh? Gradient backgrounds Remove border-radius in IE9???

  • # May 11, 2011 at 7:07 pm

    I have 2 different styles for the h1 element, depending on the parent element. In the first one their are no gradients, and the border-radius works. In the second one the border-radius does not work, and I am using gradients. So far, the only browser with this problems is IE 9, in all others everything works as intended. Could someone tell me if gradients are causing this or if there is something else I am missing.

    Here is style 1:


    h1
    {margin: -9px -9px 0px -9px;
    padding: 10px 10px 5px;
    text-align:right;
    background: #AACCEE;
    color: #024;
    font: bold 25px verdana;
    letter-spacing: 0.2em;
    height: 28px;
    vertical-align: middle;
    white-space: nowrap;
    border-radius: 10px 10px 0 0;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -goog-ms-border-top-left-radius: 10px;
    -goog-ms-border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    -moz-box-shadow:inset 0 2px 10px #222244;
    -webkit-box-shadow:inset 0 2px 10px #222244;
    box-shadow:inset 0 2px 10px #222244;}

    Here is the second:


    div.sub-content h1
    {margin: 0px -8px 0px -8px;
    padding:6px 4px 2px 4px;
    text-align:center;
    color:#DDDDDD;
    font: bold 20px "courier new";
    border-radius: 12px 12px 0 0;
    -moz-border-radius-topleft: 12px;
    -moz-border-radius-topright: 12px;
    -webkit-border-top-left-radius: 12px;
    -webkit-border-top-right-radius: 12px;
    -goog-ms-border-top-left-radius: 12px;
    -goog-ms-border-top-right-radius: 12px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    background-color:#333399;
    background: -o-linear-gradient(top, #333399, #000066);
    background: -moz-linear-gradient(top, #333399, #000066);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #333399),color-stop(1, #000066));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#333399', EndColorStr='#000066');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#333399', EndColorStr='#000066')";}

    Thanks in advance,
    Cliff

    # May 11, 2011 at 7:37 pm

    Because of the way that the directx filters work, they will be placed on top of border-radius rounded corners. Try using css3pie to get around it.

    # May 12, 2011 at 9:34 am

    Okay, thanks, in my design it would probably be easier just to remove the gradients compleatly. Thanks anyway,
    Cliff

    # May 12, 2011 at 9:50 am

    question: what is “-goog-ms-” for? never seen that prefix before.

    # May 12, 2011 at 10:03 am

    That is a prefix that I have seen used on some websites, supposedly targeting IE. Honestly, I’m not quite sure where it came from, and whether or not it is actually doing anything.
    -Cliff

    # May 12, 2011 at 10:39 am

    I’ve seen -ms- as a prefix but not -goog-ms-. By the way, you don’t need the prefix for webkit anymore

    # May 12, 2011 at 12:02 pm

    I’ve been doing a little searching on the -goog-ms- prefix, and Google Canary on Apple seems to be showing up a lot, although no one seems to be quite sure on it’s implementation.
    -Cliff

    # May 24, 2011 at 7:03 am

    Hi, another solution is to wrap the gradient element into a div. Give the wrapper div the same size and border radius as the gradient element and add overflow:hidden to the wrapper.

    I recomend hiding wraper style in an IE style sheet or something. Writing a short jQuery plugin could also be usefull for auto wrapping elements.

    -Qbit

    # November 6, 2011 at 9:35 am

    I came across this problem & none of the solutions were appropriate for me, but I found one that worked.

    If you use http://www.colorzilla.com/gradient-editor/ to generate your gradient, choose the ‘IE9 Support’ option, which adds SVG support. Follow the instructions there to add an extra class in IE9 and this will work with border radius.

    # November 6, 2011 at 7:06 pm

    Great! Thanks.

    # November 18, 2011 at 6:52 am

    Your CSS selectors containing for example:

     -goog-ms-border-top-left-radius: 10px;

    /* AND */

    border-top-left-radius: 10px;

    Both of which renders the top-left-radius on IE9. In short the top-left-radius is being rendered twice on IE9. Removing “-ms” in “-goog-ms-border-top-left-radius: 10px;” fixes this problem.

    Note: I noticed this problem because in my blog, I used to specify both styles and noticed that blog scrolling was jerky. After trying to find many small refinements in my blog I realized that both styles are being rendered on IE9.

    # November 18, 2011 at 9:34 am

    So -goog-ms- is really for IE‽

    # February 6, 2013 at 5:04 am

    Use
    background-clip:content-box;

    -webkit-background-clip:content-box;

    # February 12, 2013 at 2:00 pm

    Just use a wrapper div (rounded & overflow hidden) to clip the radius for IE9. Simple, works cross-browser. No need for SVG, PIE, JS, or conditional comments.

    text or whatever

    .ie9roundedgradient {
    display:inline-block; overflow:hidden; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
    }
    .roundedgradient {
    -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
    /* use colorzilla to generate your cross-browser gradients */
    }

    # February 12, 2013 at 2:53 pm

    I’ve read tons and tons of stuff about CSS3, and I have neither ever read about a -goog-ms prefix.

    http://stackoverflow.com/a/5411098

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".