I have a problem with internet explorer 8. I´m using modernizr with html5shiv and it´s working apparently well but html5 code is behaving bad. All content that i have into footer goes out.
If I inspect the code...
Other browsers OK:<footer id="site_footer"><div id="wrap_footer"></div></footer>
IE8 ERROR:<footer id="site_footer"></footer><div id="wrap_footer"></div>
What´s happening? i´m going mad!
pd: It´s not a javascript conflict
Thanks!!
You need use HTML5Shiv technique.
<head>
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->
<!-- all css code after-->
</head>
IE 8 and early don't understand right the HTML5 tags.
HTML5Shiv will just once call document.createElement with HTML5 tag name and add to its default css via display: block.
Related
I have developed a dynamic site using PHP Codeigniter. I have used bootstrap V3.2.0 framework for the website to be responsive. Now, the issue is, the entire website's alignment is different in IE8 and the other below versions. The look and feel of the website has been completely changed in IE8, Kindly suggest me on fixing this issue.
Try to include this code into head:
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
You can check supported tags, functions in any browser, with web site http://caniuse.com/. IE8 and below doesn't support html5 and CSS3.
I put following line into my head section.
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Opera and Chrome can show spinner in <input type="number"> elements. But IE9 can not perform this action. As far as I know html5shiv or shim can give html5 power into IE. Am I wrong ?
html5shiv only enables styling of html5 elements/tags which are unknown to the browser. It does not add browser functionality.
I recently started developing pages in HMTL 5 and everything works perfectly well in all other browsers except IE. What could be the problem?
Thank you in advance!
IE does not understand the new HTML5 element, you need to include a script that enables those element for IE.
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
More info: html5 shiv
I always use modernizr, it does the same job for you:
Thats because Internet Explorer interprets CSS And the new HTML5 tags differently than other browsers.
See: css-differences-in-internet-explorer-6-7-and-8 on smashingmagazine.com
There is a HTML5 boilerplate available which eliminates some of the crossbrowser differences, but not all: html5boilerplate.com.
Also, in conjunction with the library modernizr you are able to minimize the difference. But while you develop a website, you always do have to check the rendering in all the browsers on which they will appear, because different browsers don't render the same.
Try
<!--[if lt IE 9]>
<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<![endif]-->
If you are building responsive website you should use
<!--[if lt IE 9]>
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<![endif]-->
File you can download from http://www.initializr.com/
I basically want to create a webpage which supports HTML5's semantic elements however for browsers, which doesn't note the HTML5 elements, what can I do?
For example I'd like to use <section></section> which is noted by modern browsers, but what could I do to show a DIV instead of a SECTION if someone visits my site in an older browser?
I have tried to use the following code, which would only be useful for Internet Explorer, but hat about other browsers?
<section class="main">
<!--[if IE]>
<div class="main-ie"> Only displayed only in IE .</div>
<![endif]-->
</section>
Any suggestions?
The HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x.
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
I great way to get around this issue is to include the JavaScript polyfill library Modernizr. It makes the HTML5 elements work in older versions of IE. That way you can start using HTML5 semantic tags now rather than waiting until old IE dies ;)
You can inclide this tiny script for IE:
(function(){if(!/*#cc_on!#*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
IE understands new and custom elements if you use document.createElement.
Ref: http://css-tricks.com/snippets/javascript/make-html5-elements-work-in-old-ie/
Put this code in your head tag IE browser support HTML5 tag,
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://www.toyotapriusprojects.com/wp-content/themes/html5/lib/js/innershiv.min.js"></script>
<![endif]-->
I have a site here
http://www.deltacars.co.uk/testsite/
The menu and hover work fine in all browsers including IE8 but when I go to the another page which is using the same html and css the menu does not appear correct
http://www.deltacars.co.uk/testsite/north-wales-private-hire/privatehire.html
Please note that this is only using IE 8.
Anyone know why it works fine on one page and not the other
Thanks in advance
The broken page is missing some conditional IE comments in the header. All you need to do is right click and view the page source to compare the output.
<!--[if lt IE 9]>
<script src="shiv/dist/html5shiv.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
Give your website a thorough validation using http://validator.w3.org - my guess is that one of your 241 errors is causing this not to render correctly in IE8.
"Modern" browsers are intelligent enough to render elements correctly despite the mark-up being incorrect, hence why you're not seeing the problem on any others.