How to add IE7-IE6 stylesheets

I'm using the bp-social theme, and would like to add stylesheets to support using differing CSS for IE7 and IE6 -- yeah,yeah, I hate them, too, but my 25% of my clientele (hospitals) still use IE6 and another 35% use IE7, and no, I can't "convert" them. Gotta live with it. I know how to do this in a Joomla template, but I'd like an example of doing this in a Wordpress template.

Is there one in the library of premium templates here?

  • DavidM

    Hi Ernie,

    I'm not totally sure of this myself, but I've seen this done in a theme framework I've used extensively. In header.php, the following was included:

    <!--[if IE 6]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.ie6.css" type="text/css" media="screen" /><![endif]-->
    <!--[if IE 7]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.ie7.css" type="text/css" media="screen" /><![endif]-->

    And of course, style.ie6.css and style.ie7.css were included in the theme folder.

    I'll ask a few folks around here if they've got other ideas on it, but that's the only method I've ever seen for doing that.

    Cheers,
    David

  • Tammie

    That's sort of the old method really. Better would be something like this in header.php for a few style differences which nowadays is all it will amount to:

    <!--[if IE 6]>
    <html id="ie6" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if IE 7]>
    <html id="ie7" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if IE 8]>
    <html id="ie8" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
    <html <?php language_attributes(); ?>>
    <!--<![endif]-->

    Assumes you are using html5 though but you can adapt to xhtml.

    Then you can simply rather than bloated multiple stylesheets call that class directly in one single style sheet for all styles. Better on server.. better on brain to make sense.

    #ie7 .post-body{height:100%;}
    #ie8 #sidebar-right .post-thumb-sidebar img{border:none;height:80px;}

    For instance the above examples show calling direct elements using cascading.

    Also check out things like:

    http://www.modernizr.com/ : sledgehammer backwards compatibility allowing multiple things like CSS3 and html5 stuff to work on older browsers.
    https://github.com/scottjehl/Respond : lighter method to just allow @media queries and responsive design on older browsers.
    And my personal favorite: http://code.google.com/p/html5shim/ : html5 on old IE browsers :slight_smile:

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.