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 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.
Why the following code download BOTH 2.0.2 and 1.9.1 in IE8? (actually it's IE9 but in IE8 browser mode)
I am not so sure on the syntax, just copy/paste it from somewhere. But it works as expect on Firefox (only download 2.0.2) and IE9 (only download 2.0.2 as well), but on IE8 (again, IE9 in IE8 browser mode) both files get downloaded.
<head>
<!--[if lt IE 9]>
<script src="{{STATIC_URL}}js/jquery-1.9.1.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="{{STATIC_URL}}js/jquery-2.0.2.min.js"></script>
<!--<![endif]-->
</head>
BONUS question:
What's the complication if both jquery files are downloaded?
The correct code according to MS is:
<head>
<!--[if lt IE 9]>
<script src="{{STATIC_URL}}js/jquery-1.9.1.min.js"></script>
<![endif]-->
<![if gte IE 9]>
<script src="{{STATIC_URL}}js/jquery-2.0.2.min.js"></script>
<![endif]>
</head>
As you can see the first block is the same. The second block has had some syntax removed that was unnecessary and almost certainly what was confusing things. Additionally it uses the "downlevel-revealed" syntax of conditional comments which will display on everything that doesn't recognise this conditional comment syntax.
Searching for "internet explorer conditional comments" was all that was needed to find this definitive help page: http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
On further investigation your original code looks like it was based on that given in http://blog.jquery.com/2013/03/01/jquery-2-0-beta-2-released/ . I would guess therefore that this should work and therefore your problems are more likely coming from your rather interesting test environment which is both IE8 and IE9 at the same time.
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]-->