Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Tim Herbert
Tim Herbert
8,634 Points
Posted by Tim Herbert
Tim Herbert
8,634 Points

Wordpress Bootstrap 3 and IE8 Troubles

So I am really struggling with this and have spent the better portion of the day trying to figure out why I can't get this site working on IE8.

I started with the Bootstrap to WP tutorial here and have been building on it for a client but can't seem to get it working on IE8.

Sometimes it will display the navbar but it won't pick up the inline styling I have set to show the background, it won't show the secondary nav I have setup for the main page's nav. It just seems like it's a mess.

I got to the point that I disabled the css in functions.php and put it into the header.php along with the IE conditional and I still can't get it working. I included the conditional I am currently using and if you want to view the project it is live at:

http://washingtonclayarts.org

<?php wp_head(); ?>
<link href="<?php bloginfo( 'template_directory' );?>/bootstrap/css/bootstrap.css" rel='stylesheet' type='text/css'>
<link href="<?php bloginfo( 'template_directory' );?>/style.css" rel='stylesheet' type='text/css'>

  <!--[if lt IE 9]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="<?php bloginfo( 'template_directory' );?>/js/respond.js"></script> 
<style type="text/css">
    .navbar-inverse .navbar-nav>li>a { background: url("<?php bloginfo( 'template_directory' ); ?>/images/nav-bg1.png"); }    
</style>  
<![endif]-->

1 Answer

Sander de Wijs
PLUS
Sander de Wijs
Courses Plus Student 22,267 Points
Sander de Wijs
Sander de Wijs
Courses Plus Student 22,267 Points

Hi Tim,

I ran into the same problem with the Bootstrap navigation for IE8. This HTML code in the head section worked out best for me 

  <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->

On recent projects I tend to not support IE8 any longer and instead redirect them to a site like www.browser-happy.org. IE8 is a safety hazard and IE8 users should be actively encouraged to update their browsers.