Jump to content

HTML5 Display in Older Browsers - shiv, etc...


cuysan

Recommended Posts

I have an html5 temp site I'm creating and hoping I can get some of the older browsers to load it. I've read many pages suggesting a shiv as below:

 

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

 

or

<!--[if lte IE 8]>
<script src="dist/html5shiv.js"></script>
<script src="dist/html5shiv-printshiv.js"></script>
<![endif]-->

 

I tried both methods but no results. I have an old IE8 version open and that's what I am using to confirm when the changes work. It currently doesn't display right in IE8.

 

My code is valid, with the exception of one music file name ( I can fix this by creating a new mp3 with proper naming).

 

That's all fine and dandy but is it even possible for me to get this displaying correctly in ie8< and the other outdated browsers? Any help from the pro's would be appreciated. Head section is as follows:

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="Copyright" content="" />
<meta name="rating" content="GENERAL" />
<meta name="format-detection" content="telephone=no">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/flexstyle.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
<script src="js/jquery-1.11.1.min.js"></script>

Link to comment
Share on other sites

A few more details. Two sections that are creating problems. In the below header section the item in "banner area wrapper" is pushed down below the logo. This image is to the right of the logo on html5 compliant browsers.

 

<div class="container">
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div class="logo">
<a class="navbar-brand" href="index.html"><img src="images/logo3.png" alt=" " /></a>
</div>
</div>
<div class="banner-area-wrapper">
<a class="navbar-brand hidden-sm hidden-xs"" target="blank"><img src="images/sample.png" alt="" /></a> /></a>
</div>
</nav>
</div>
</div>
<!-- header -->

 

Second section is three boxes side-by-side but on older browsers it shows full size images, not the three boxes. Below is a the code from one of the boxes.

 

<div class="about-grids">
<div class="col-md-4 about-grid">
<img src="images/consulting.jpg" alt=" " class="img-responsive" />
<div class="about-grid-john">
<div class="clearfix"> </div>
<h5><strong>Consulting Services</strong></h5>
<p class="para"><strong></strong> Move beyond digital to make more informed decisions and draw customers closer..</p>

<div class="hello">
<a href="consulting.html">Read More..</a>
</div>
</div>
</div>

Link to comment
Share on other sites

Thanks so much. That shiv I have in place and will help with some browsers. There are also some conditional "if" statements that help some (if my terminology is correct).

 

I now understand the lack of answers on here so far. I spent some time away from coding and looked into display issues in general. I was struggling trying to get ie8 to display responsive. For anyone looking for that answer, the answer I see is add this script to your code. Force the hold-outs to use an up-to-date browser, don't waste your time trying to cater to ie8 and below, or the hold-outs.

 

This forum is full of great advice. If someone isn't answering, either the question is posted wrong or there just isn't anything to add. The pro's that did not answer get my respect also. Sometimes the true answer isn't what the person is looking for. In this case, I would say the answer is don't waste your time with ie8 display. Or use old fixed-width code. :X:

 

Of course simple responsive pages render fine in ie8. Complex code is too much for the out dated browser. No wonder I have Linux on a few systems so far.........

Edited by cuysan
Link to comment
Share on other sites

  • 4 weeks later...

you can also try this

<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="js/html5shiv.js"></script>
        <![endif]-->
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...