Question

One of our web designers is working on a site at the moment and is using HTML5 elements, which she styles up in older browsers using the well documented Html5Shiv;

http://css-tricks.com/html5-innershiv/

She reported some pretty weird behavior today and it looks like this is the cause. Initially it was very confusing, and went something along the lines of;

"The page looks fine, I refresh it looks fine, refresh several times and occasionally it will not apply my styles to the HTML5 elements"

Current best theory is that the shiv is not kicking in quick enough, and the page loads before the new elements have been registered. I was wondering if anyone could suggest a surefire way of including the shiv and making sure it's loaded and been parsed BEFORE the rest of the elements, so they will definitely get styled.

EDIT (more info)

Shiv is being included in the head, directly below the title/meta tags;

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

The bit that is being styled is in the footer and is cross-site. Many of the pages will change in size as they're being powered by a CMS that our marketing team will use so I am unable to give an exact page size. All I would say is that if page size is an issue and there is no workaround, can someone let me know as this will mean we basically can't use HTML5 on this project (or at the very least we'll need to add superflous markup such as divs to ensure that the layout doesn't go crazy)

EDIT 2

There is no chance of me posting the code unfortunately - it's only re-creatable under really obscure circumstances and the project is marked "top secret" at the moment :( If nobody knows then I'm guessing it's either a case of "everyone knows it happens but kinda ignores it" or just that it's something else other than the shiv.

Was it helpful?

Solution

You could try placing the html5shiv code (there isn't much) directly into the browser at the same place and see if that helps. That way it wouldn't be waiting on a separate HTTP request which might be causing an issue.

EDIT I just noticed that you're talking about the innerShiv and not the simple html5Shiv. The innerShiv is only required when you are inserting HTML5 elements on the fly, e.g. via jQuery and/or AJAX. Is this what you are doing, as it doesn't sound like it. If so, all you need is the html5Shiv.

EDIT2 Ah your code above is using the html5Shiv rather than the html5InnerShiv...

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top