I'm having some issues with testing Twitter Bootstrap v3 in IE8. The problem seems to be the layout goes completely responsive in IE8 instead of showing the desktop version on the desktop using Windows 7.
This is the code in my head:
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
I see one of their examples works just fine, so I'm not sure what's going wrong here.
Respond.js only works with local CSS files unless additional steps are taken. I would recommend serving your 'bootstrap.css' file locally as a simple fix.
More information can be found at http://getbootstrap.com/getting-started/#browsers
Thanks! I think that is the issue. I didn't realize you can't use the CDN.
I just found this thread as well that goes over several things:
IE8 issue with Twitter Bootstrap 3
I'll go through and I'm sure that and some combination of these items should do the trick.
Related
For what do I need to pay attention if I want to my Website to work for all Browsers?
I included the following files into my .html, but the firefox does not show my navigation right and in Explorer my overlay which is a section is not right too.
<!-- HTML5 shiv and Respond.js support IE8 or Older for HTML5 elements
and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js">
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js">
</script>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<script src="bower_components/html5shiv/dist/html5shiv-printshiv.js">
<![endif]-->
I found out my explorer is the version 11 but I dont find any help for that.
What can I do to include my website for Mozilla firefox and explorer is the main question.
check out this post. I think this is the same problem, if it isn't just leave me a comment.
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 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.
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]-->