1

I've started to build a WordPress theme using Bootstrap but cant get it to display correctly in older (6, 7 & 8) versions of IE.

I have stored the html5shiv and respond js files on the server and put the conditional after the CSS files but it still doesn't render correctly - containers are stretched out etc.

All CSS is currently hard-coded in the header so there are no @import problems.

My code looks like this -

<!DOCTYPE HTML>
<html lang="en">
 <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />
<title>
Test    </title>
<link href="<?php bloginfo('template_url');?>/bootstrap/css/bootstrap.css" rel="stylesheet"     type="text/css" />    

<?php wp_head(); ?>

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="<?php bloginfo('template_url');?>/bootstrap/js/html5shiv.js"></script>
  <script src="<?php bloginfo('template_url');?>/bootstrap/js/respond.js"></script>
<![endif]-->

 </head>

I've searched the internet over and over but can't find an reason as to why the html5shiv and respond fix isn't working. Has anybody got any suggestions?

Thanks.

user3490376
  • 23
  • 4
  • 1
    _but cant get it to display correctly in older (6, 7 & 8) versions of IE_. Good advice: Stick just to IE 8+. Even IE 8 is nearly dead already. – emerson.marini Oct 01 '14 at 18:29
  • template_url is a relative path? if it's not a relative path it won't work – Christina Oct 01 '14 at 18:31
  • Only IE8 will look okay with respond.js when the instructions for respond.js are followed, any versions under that won't display well at all. Can't move ahead and stay behind at the same time. – Christina Oct 01 '14 at 18:32
  • From the Bootstrap website: "On Windows, we support Internet Explorer 8-11". and "Unofficially, Bootstrap should look and behave well enough in ... Internet Explorer 7, though they are not officially supported". -- http://getbootstrap.com/getting-started/#support So forget about IE6, and forget about any official support for IE7. – Asaph Oct 01 '14 at 18:33
  • 2
    Just saw this other SO post http://stackoverflow.com/questions/15891535/html5shiv-not-working-in-ie8 it looks like you need to load the html5shiv first before all your other scripts. – crazymatt Oct 01 '14 at 18:33
  • Bootstrap officially supports Internet Explorer 8-11, and with 8 (and 9) there are caveats and bugs with support. Please see the Browser and Device support section of this site: http://getbootstrap.com/getting-started/ – khilley Oct 01 '14 at 18:34
  • Yes but they use css all over the place that does not work in IE7 since it didn't exist then and there's no fallbacks either. So it will not break, but it won't look good. – Christina Oct 01 '14 at 18:35
  • @crazymatt I think you've got the answer in your comment. Specifically, move the `` and `` after the `<![endif]-->`. You should add it as an answer. I will upvote it. – Asaph Oct 01 '14 at 18:37
  • OK, forget IE 6 and 7. I only really need it to work in IE 8. – user3490376 Oct 01 '14 at 18:38
  • Generally, though I don't use wordpress as a CMS, it defaults to an absolute path unless you tell it otherwise, absolute paths won't work with respond.js unless you create a cross-domain set up. See the docs. This funky issue with WP is the reason why: https://wordpress.org/plugins/respondjs/ – Christina Oct 01 '14 at 18:39
  • I will try the Respond.js plugin. Thanks for the replies! – user3490376 Oct 01 '14 at 18:53
  • Thanks Christina! Everything seems to work according to Browserstack - time to do some real testing! – user3490376 Oct 01 '14 at 18:55
  • http://crossbrowsertesting.com/ better than Browserstack in many respects, you get some free time to start. – Christina Oct 01 '14 at 18:58

1 Answers1

1

In order for HTML5shiv to work you need to have your script run in the Head of your code and above other scripts running on the page so that HTML5shiv can run first. Try moving that above your other scripts and your <?php wp_head(); ?> call.

Similar question posted here on Stackoverflow

Community
  • 1
  • 1
crazymatt
  • 3,266
  • 1
  • 25
  • 41