Css for IE 8, IE 7 and below

  • Resolved Asus24

    (@asus24)


    11 years, 8 months ago

    I am trying to have at least 3 different css for my website.
    1. one for all the fabulous browsers and ie 9 and above,
    2. one for ie 8,
    3. one for ie 7 and below

    The reason is my site does not look right in ie and I am trying to ensure it downgrades nicely.

    I found this code in functions.php

    wp_enqueue_style( ‘twentytwelve-ie’, get_template_directory_uri() . ‘/css/ie.css’, array( ‘twentytwelve-style’ ), ‘20121010’ );
    $wp_styles->add_data( ‘twentytwelve-ie’, ‘conditional’, ‘lt IE 9’ );}

    I know it will us ie.css for all ie below 9 but I really really need the 3rd one for ie 7 and below separate from ie 8. Any help with how to modify it will be greatly appreciated.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter Asus24

    (@asus24)

    I tried modifying the code in this way

    wp_enqueue_style( ‘twentytwelve-ie’, get_template_directory_uri() . ‘/css/ie.css’, array( ‘twentytwelve-style’ ), ‘20121010’ );
    $wp_styles->add_data( ‘twentytwelve-ie’, ‘conditional’, ‘lt IE 9’ );}

    wp_enqueue_style( ‘twentytwelve-ie’, get_template_directory_uri() . ‘/css/ie7.css’, array( ‘twentytwelve-style’ ), ‘20121010’ );
    $wp_styles->add_data( ‘twentytwelve-ie’, ‘conditional’, ‘lt IE 8’ );}

    but I still did not get the ie7 css, please someone any advice would be appreciated

    get_template_directory_uri() is pointing to parent theme’s folder.
    To point to child theme’s, use get_stylesheet_directory_uri()

    Also, don’t forget that the lt in lt IE 9 for example, will load for any IE lower than IE9, so it depends on what you do with those stylesheets.

    If you only want specific, dequeue the one from parent and use the conditional without lt instead, and keep adding one for IE8, and IE7, also without lt.

    As a matter of fact, I don’t think you would need another whole stylesheet for each IE like that. Take a look at what’s inside the <head> in header.php.

    Theme loads series of IE condition already. You can even make a link to your IE7, IE8 stylesheet in there. Or just make use of .ie7 and .ie8 prefix in html class right in the childtheme stylesheet.

    Thread Starter Asus24

    (@asus24)

    Thank you paulwpxp so much for responding.

    The header.php only has IE condition for language. I tried adding a link to ie 7 css directly to the header and it still did not use it. I would like to try the dequeue option you suggested, can you please give me an example of how the code should look.

    /**
 * Remove twentytwelve-ie css must use priority greater than 10
 * Childtheme's version of ie.css put in childtheme's css folder
 */
function mytheme_dequeue_styles() {
	wp_dequeue_style( 'twentytwelve-ie' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_dequeue_styles', 11 );

function mytheme_equeue_styles() {
	global $wp_styles;
	wp_enqueue_style( 'mytheme-ie', get_stylesheet_directory_uri() . '/css/ie.css', array( 'twentytwelve-style' ), '1.0' );
	$wp_styles->add_data( 'mytheme-ie', 'conditional', 'lt IE 9' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_equeue_styles', 11 );

    First function is to remove (dequeue) from parent, the second one is to add child theme’s version.

    Thread Starter Asus24

    (@asus24)

    Thank you so much, it worked so well. I am still struggling trying to write ie 7 compatible css but at least its using the right css files. thanks so much

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Css for IE 8, IE 7 and below’ is closed to new replies.