My site in IE8 isn't reponsive

I just loaded up a fresh install locally and at this test site and tested both in IE with the developer tools in IE8 Mode/IE8 Standards as well as testing in IE8 with IE Tester.

I know IE8 is pretty much out but the company I work for unfortunately uses it.

Customizr isn’t flexing.. it’s not responsive. It acts like the site has a min-width and stops flexing at a certain size like a fixed width.

Please, could someone offer some help?

Michael

Customizr is a theme based on web standards and also makes use of a lot of CSS3 properties, which are not all supported by IE8. Unfortunately, even though IE8’s initial marketing slogan was “the first Microsoft web browser to respect web standards”, it didn’t live up to it.

So, basically, you need a responsive theme that only uses CSS 2.1 properties or earlier, and Customizr isn’t one of them. (Actually I don’t think such themes exist, but I might be wrong).

Another option is to create your own ie8-hacks.css in your child theme and use it to modify the looks of the theme in IE8. You’d conditionally load it by placing this code in your child theme’s style.css:

<!--[if IE 8]>
@import url("ie8-hacks.css");
<![endif]-->

Thanks Acub.. I know you’re busy and I appreciate the help..

As I found that some of my testing was looking ok in Mobile and Ipad and near reasonable in IE8.. this @import piece of code might help. Thanks!

So, I could make a css file at the same level as the style.css and with the @import call it will bring in those styles obviously commented out for IE8 only..?

Michael

This is what it looks like in my stylesheet here is this correct?

Thanks

In other words it’s not looking like it’s commented out in my style.css….

The code you showed me above isn’t darkened out like a css comment would be.. will that still work?

/* like this would be */

Thanks,Michael

I’ve tested it a bit and the hack code isn’t being picked up.. any thoughts on another way to get the hack css sheet into my child theme..

What about a basic conditional comment with a link to the ie8-hack.css file?

Michael

Well, I thought conditionals work in css too. My bad. They only work in html.
You need this code in functions.php of your child theme:

add_action('wp_head', 'add_ie8_custom_css');
function add_ie8_custom_css {
echo '<!--[if IE 8]>
	<link rel="stylesheet" type="text/css" href="'.get_stylesheet_directory_uri().'/ie8-hacks.css" />
<![endif]-->'
}

Should work now. I’m sorry I can’t test this myself, I don’t have IE lower than 10 here and this type of conditionals do not work in IE10 and above.

Cool function! Thanks acub!
Be well!
Michael

Acub.. I put it into the functions file and I get a parse error..

Parse error: syntax error, unexpected '{', expecting '(' in C:\wamp\www\customizr\wp-content\themes\customizr-child\functions.php on line 17

I used this code:

<?php
add_action('wp_head', 'add_ie8_custom_css', 0);
function add_ie8_custom_css() {
echo '<!--[if IE 8]>
    <link rel="stylesheet" type="text/css" href="'.get_stylesheet_directory_uri().'/ie8-hacks.css" />
<![endif]-->'
}
?>

As the code you gave me drew an error.. Any thoughts? I’d love to have that code.. nice way to hook into the head and add things!
Thanks! Michael

I found so code here that worked from here and used this global style:

add_action( 'wp_head', 'wps_add_ie_html5_shim' );
/**
 *  Add IE conditional html5 shim to header
 */
function wps_add_ie_html5_shim() {
    global $is_IE;
    if ( $is_IE ) {
        echo '<!--[if lt IE 9]>';
        echo '<script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>';
        echo '<![endif]-->';
    }
}

From Eunus Hosen and adapted it to the code Acub showed me.. it’s working!

Resolved.. Thanks!

I now see my echo was missing the trailing “;”. Maybe I should only answer tickets when I’m fresh. ??

No worries.. recently the moderator on a few posts asked me to make sure I knew how to add a link properly.. I was way too tired to figure it out in that moment ??