The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Target IE9?

  • # November 27, 2012 at 7:08 pm

    I have a question is there a way to target IE9 in a gradient background setup so IE9 will have a plane background like so?

    body {
    color: #00000;
    /* IE10 Consumer Preview */
    background-image: -ms-linear-gradient(top, #FFFFFF 0%, #4E0700 100%);
    /* Mozilla Firefox */
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #4E0700 100%);
    /* Opera */
    background-image: -o-linear-gradient(top, #FFFFFF 0%, #4E0700 100%);
    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #4E0700));
    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #4E0700 100%);
    /* W3C Markup, IE10 Release Preview */
    background-image: linear-gradient(to bottom, #FFFFFF 0%, #4E0700 100%);

    /* IE9 Consumer Preview */

    background-color: #FFFFFF; (note this is the bg i want only IE to have but this doesnt work)

    background-color: #4E0700; (note this the color i want all the other browsers to have b.c the gradient isnt repeating down)


    margin: 0px;

    To see live ::

    # November 27, 2012 at 10:52 pm

    Here’s the code I use to target specific IE browsers on my website

    EDIT -> it goes in the head of the HTML file

    # November 28, 2012 at 8:49 am

    A method I use to target browsers:


    <!–[if IE 7 ]> <body class=”ie7> <![endif]–>
    <!–[if IE 8 ]> <body class=”ie8> <![endif]–>
    <!–[if gt IE 8]><!–><body><!–<![endif]–>

    Then, in the CSS:

    .somediv {

    .ie7 .somediv {

    In the above example, IE7 will show somediv at 450px, while all other browsers will show it at 500px.

    Side point: If a gradient is what you’re after in IE, you can use the ugly-ass lump code below (note: It doesn’t play nice with border-radius):

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ed1c24′, endColorstr=’#aa1317′);

    # November 28, 2012 at 11:53 am

    This reply has been reported for inappropriate content.

    Here are all the ways to target ie

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed