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.
Related
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'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.
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.