The Problem:
I was recently working on a client’s site and they needed a countdown timer to display in the header. They settled on a plugin, but the plugin looked horrible in Internet Explorer (IE). The labels for weeks, days, hours, minutes and seconds were popping way out of their boxes in IE9, and not showing at all in IE8.
I couldn’t figure out what the issues was with the CSS…possibly a conflict with the Genesis Child Theme we were using, but I needed to find a solution.
I decided the easiest solution would be to hide the spans which displayed the labels (because they were so far out of whack), set the most of the backgrounds to “none” and add a background image on the outer wrapper. This would give me the same look as I have on Firefox/Chrome/Safari. I didn’t want to use the extra image on all browsers so I had to include a conditional comment and create IE specific css styles.
The Solution – Adding a new class the the html tag
I came across this article on Web Designer Wall that highlighted some options. One of the options that was new to me, but also the most interesting, was to use a conditional statement to add a class to the HTML tag.
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->
This is telling the browser that if the browser is a certain version of Internet Explorer, add the appropriate class the the html tag. It’s set up for different versions using if statements.
If less than (“lt”) IE 7, use class “lt-ie9 lt-ie8 lt-ie7″:
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
If equal to IE 7, use class “lt-ie9 lt-ie8″:
<!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]-->
If equal to IE 8, use class “lt-ie9 lt-ie8 lt-ie7″:
<!--[if IE 8]> <html class="lt-ie9"> <![endif]-->
If greater than IE 8, do not add a class to the html element:
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->
The article I read was based off of another article written by Paul Irish. I recommend reading both of these articles in full if want to learn more about using this method.
Using this method with the Genesis Framework and WordPress
So I decided to use this method for my client’s site, and I was only concerned with IE7, 8 and 9. Since I’m using a Genesis child theme, I added this code to my functions.php:
/* add style sheet for Internet Explorer to fix countdown widget display */
/* if browser is ie, add "ieclass" to html for ie specific class to display properly in ie */
add_action('genesis_meta', 'alphablossom_ie_styles');
function alphablossom_ie_styles() { ?>
<!--[if IE]> <html class="ieclass"> <![endif]-->
<?php
}
This says if the browser is Internet Explorer (any version), add a class of “ieclass” to the html tag. You can then target your css by using your new class, which will only apply when viewing the page in an IE browser:
.ieclass #outer-wrapper {
margin-top: 45px;
height: 50px;
}
.ieclass #inner-wrapper {
background-image: url(images/timer-bkg.jpg);
background-repeat: no-repeat;
padding: 10px 0 0 5px;
background-position: 5px 0;
}
Applying this method to specific pages
If you only want it to apply to certain pages, you can use conditional statements such as:
/* add style sheet for Internet Explorer to fix countdown widget display */
/* if browser is ie, add "ieclass" to html for ie specific class to display properly in ie */
add_action('genesis_meta', 'alphablossom_ie_styles');
function alphablossom_ie_styles() { ?>
if ( is_home() ) {
<!--[if IE]> <html class="ieclass"> <![endif]-->
<?php
}
}
This code will only add the class to the html tag when viewing the Home page.
Of course, with very little modification you can apply this to any WordPress website.
There are other ways to use conditional CSS for IE as shown in Web Designer Wall’s article, but this one seems the cleanest to use, and with no validation errors. It’s also the method used in the HTML5 Boilerplate, so that’s gotta count for something 
.
If you have any input on this method, or want to share your method, please leave a comment below.
if(get_field('code_snippet_additional')): ?>
<div class="codes-snippets">
<?php esc_html( the_field( 'code_snippet_additional' ) ); ?>
</div><?php
endif;