I have a very light backbone app which I've been developing recently and I'm having a lot of trouble getting HTML5 elements to work in IE8. I've found multiple blog posts around the place talking about html5shiv and modernizer
I have tried both of these as CDNs and local JS libraries but no matter what IE will not detect the new elements.
I found an old issue on github that is the same as mine but details that html5shiv should fix my issue but it really doesn't. I've double checked that the JS libraries are loaded and run, I've tried moving it around above my stylesheets, below my stylesheets, and at the very top of the head section but nothing will work. I even found an old blog post which talks about work arounds for my exact issue, and says that the new html5shiv as of Jan 2013 should fix it. I'm really at a loss here, has anyone had this working nicely?
I'm running backbone 0.9.10 and jQuery 1.8.2 with a Drupal 7 backend but I think these are irrelevant.
I have finally managed to create a jsfiddle which demonstrates my issue and shows that html5shiv should indeed fix the problem. It also shows it has nothing to do with backbone, this is a bug in jquery.
The broken dom elements come from the line
$(document.body).append($('.test').clone());
Viewing the full result page in IE8 correctly shows tags. Removing html5shiv reproduces the issue I have, even though adding html5shiv to my own project does not fix the issue.
Related
on a website I am working on I have problems with an rendering issue which I can't figure out.
I've already played with margins, positioning, z-indices and so on to get it away but nothing of that helped.
It only occurs in IE8 (under Windows XP, don`t know if on newer OS also). I know IE8 is a bit deprecated, but because the rest of the page is displaying fine with it I would also like to support it, since some of my visitors may have installed it.
If you take a look at the page you can identify the issue very fast when using IE8:
http://kunden.tommy-computer.at/fsv_noetsch/
Here is what the menu headers look like in modern browsers like FF/Chrome/Opera/IE>8:
And here is what they look like in IE8 (wrong):
How can I get rid of it. Please help, can`t figure it out why this happens. Thank you very much !
You are using the new html doctype and I noticed you are also using at least one html 5 element article. IE 8 won't recognize that element, or anything related to html 5. You need to use javascript to fix IE by using a script called html5shiv.
What this will do is inform IE of the new elements so they can be styled.
The website I'm working on is currently working fully on latest chrome which is what I'm using, but when I use tools like IE NetRender to check its compatibility with older IE versions, the site comes up plain, with no styling AT ALL!
However, IE8 is on a completely different level. The site is looking almost as good as it's on chrome/firefox/whatever.
I tried using IE9.js, modernizr, IE Hacks, everything - but nothing worked.
Somehow it all seems to take effect only on IE8+.
It's as if IE7- don't even load the stylesheet.
I also checked my code for errors in the CSS/HTML markup but all of the errors point at the IE css hacks.
What could possibly be the cause to this? I'm literally frustrated with it.
The site (just a development page) is http://kanjiman.0zed.com/
Any help will be MUCH appreciated.
Please try to render the page using IE NetRender and see what I'm talking about.
P.S; I did try to Google/search for a solution - but in none the situation was as bad as mine.
EDIT:
The problem was IE9.js - I found this out thanks to Fabio's answer.
Whether you want to keep it or not is up to your project requirements and your priorities.
I personally am going to keep it since as both Rob / Felis commented, IE versions 6/7 are DYING! I'd rather provide a better user experience for now rather than supporting and spending more time with older browsers.
Also, this is only a matter of about 3 lines, so if your site starts to gain more IE7 traffic (I doubt it will even worth it), it's always changeable.
Thanks Rob, Felis and Fabio :)!
This is what i see in Internet Explorer 7
<style _7="
article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}">CSS Stylesheet</style>
this is what should be there:
<style>
article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}</style>
For some reason, you are assigning the style as an attribute for the style tag making it useless for internet explorer. Why dont you use css files for styling instead of mixing it with the html source code?
Hope it helps
http://pastorcarepbr.com/
I HTML validated it and it looks just the way I want it to in Firefox but in Chrome and Safari the #main div doesn't have the background color showing and the break tag with css set to clear both doesn't clear the way it does in Firefox.
I can't figure out what I did wrong considering it works fine in Firefox and it also HTML validates. Can anybody take a look at it?
Also, is this a coding error or a Web Host problem? I keep getting an old and new version of the Web page depending on if I do a simple refresh or a Ctrl+Shift+R refresh.
As mrtsherman and Nicole said, it was just the cache. Private browsing shows consistently.
you need a <div style='clear:both'></div> right before the #main closing tag. I shouldn't have anything to do with your browsers cache or web hosting.
I think it is probably a caching issue. The page seems to render fine to me. Here is quick tip. To take caching out of the picture, open up an incognito/private browsing instance. Then let us know what you see. I think this will resolve it. If this is the problem then you can version your CSS files by appending .css?version=1.1 for example. If you do this server side you can append a timestamp to do this automatically.
:)
To help out a bit more 1. You should provide the code you are working with. It is a major help in trying to figure out what is going wrong. And 2. the old and new version of the web site sounds to me like you need to clear your browser cache.
I've ran into a snag I've been working on for a couple days and can't seem to come up with an answer online. The site template I'm working on now is located at "http://citylakersbaseball.org/2.0" - I've got a div named "sponsors" that shows up fine in Chrome and the built in Live View of Dreamweaver CS5 - however, in Firefox 3.6 & 4beta it completely vanishes. I can see it in the view source, yet firebug has it grayed out. Maybe it's a DOM issue? (for which I don't know much about). Rendering engine issue?
I ran the source (index,htm) and CSS (style.css/nav.css) through the HTML validator - HTML is fine, and the CSS didn't spit back anything I would think could effect the div's display, especially since Webkit has no issues with it.
Any thoughts would be appreciated. Thanks in advance!
Your ad-blocking Firefox plugin is detecting and removing the div from the DOM. I experienced the same behaviour in Chrome and Firefox (which have ad-blocking plugins/extensions), but not in Safari or IE (which don't); and, indeed, the div appears if I disable Adblock Plus. One of the more basic rules Adblock Plus and the like follow is to look for HTML elements with class="sponsors" or id="sponsors" and remove them.
I'm currently finishing up testing a new Ruby on Rails app. Just recently, some of the pages do not seem to finish downloading in IE8. In FireFox, Chrome and Safari, everything works perfectly. The pages all validate successfully using the W3C validator.
When I view the page source in IE8, the page has been chopped off around 75% of the size it should be. IE8 claims the page is finished loading, and doesn't give any errors, but of course the page isn't rendering properly.
Has anyone seen this before? I'd really appreciate any help.
Have you tried to watch the http requests, using something like Http Analyzer or HttpWatch (like firebug for IE)? That might shed some light if there is a problem with a JS or CSS file not being found, or if the server is returning something other than a 200.
HttpWatch has a free version at http://www.httpwatch.com/download
IE8 Comes with a built in developer toolbar. Just press F12.
You should be able to diagnose most problems using it.
Also, open the page in Firefox with the Webdeveloper Toolbar addon and check if any javascript issues are arising. I find that sometimes you may only see the error in IE8 but you might only figure out what is wrong using Firefox. Give it a try!
There was a javascript call in the page that needed to be wrapped with:
document.observe("dom:loaded", function() { ... };
in order to work in IE. Apparently, it was disruptive enough to kill the entire page render. Thanks BenTheDesigner!
Since this is the first result on a Google search for IE8 not completing a page request, I thought I'd add on that I've seen the same symptoms caused by Sophos Anti Virus' Browser Helper Object which interferes with page requests and thus doesn't complete download requests every time.
Hitting F5 resolves the issue most of the time but a click to the next page can cause it to reappear. Other symptoms include odd page rendering of background images, incorrect repeating or no repeating being done at all despite a CSS declaration specifically telling a background to repeat. I spent a week debugging my CSS and XHTML only to eventually try disabling all the browser "Add-ons" and all of a sudden the issue went away.
I nailed it down to Sophos' BHO and now no rendering issues.