IE8 Content Issues - html

Hello I have a site at http://www.jn-design.co.uk/WirralPT
It appears okay in all other browsers except from IE8 , I havent even attempted below 8 yet.
The home page list and footer is not as it should be, please view in chrome or more recent browser to see what it should look like.
I have validated all my code for HTML and CSS and it is fully valid.
Any help would be greatly appreciated!

nav and footer html5 elements are not supported by interenet explorer 8 and lower. Try to add them with javascript using html5shiv

Related

Why is IE8 ignoring the background color?

We have a site here and it displays a white background correctly in all modern browsers, Ie9-11,Chrome,FF,Safari, etc. However, OF COURSE, IE 8 messes it up and seems to make a transparent background and I have no idea why. This is also on the news page only so I'm wondering if it has to do with the horrible tables-based layout SharePoint is using (I'm not a fan). Here's the URL.
Thanks in advance for any help you can provide!
It's not about IE, it's about html. My guess is that IE is in the Quirks Mode (as are all the browsers) because you have a leftover closing comment close to your doctype. Correct it.
P.s. All the new browsers have to arrange the code by themselves too. If you inspect the site and look into the DOM you'll see that instead of the <head> all your links and metas are in the <body>.

Responsive NAV IE

I have a navigation bar that works very well in Chrome - however it fails in Internet explorer 8 or less.
the link is www.notebox.ca/AP - you may view the code there.
I know there is bootstrap, but I was wondering if there is any way to add something to the code to make it work in IE.
Thanks
https://github.com/scottjehl/Respond will polyfill the missing functionality you need in older IEs.

IE8 rendering problems with h2

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.

Internet Explorer CSS Problem

This page is being rendered incorrectly by IE 9 (and probably older versions too). The right menu is floating to the bottom of the page. Firefox, Chrome and Safari are rendering it correctly. Other pages in the blog are also being rendered fine by all browsers. I already tried to fire IE 9 Developer Tools (F12) and reduce the width of some divs (such as #main and .columns-inner)... no lucky with this approach, even with extra space the right menu is still rendered at the bottom. So I figure that the problem is in the Blogger auto-generated tags / css for the page content (which I am able to modify). Any CSS gurus out there can point what is wrong?
Cheers,
You have this line in your <head>, which is causing IE9 to render the page in IE7 mode:
<META content=IE=EmulateIE7 http-equiv=X-UA-Compatible>
If you remove this, it renders fine in IE8 and IE9. It still renders poorly in IE7, though.
Edit:
In response to your comment, I am able to replicate the issue with the background no longer being opaque. After some investigation, there is a particular script file being loaded:
http://www.blogger.com/static/v1/jsbin/938506610-ieretrofit.js
If you remove the <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> on line 4 of the source, and you remove the ieretrofit.js file from line 1471 of the source, the page should render correctly in IE9.
Since the ieretrofit.js file appears to be generated by Google, you might want to ask them about it. If you would like to disable it JUST for IE9, and allow it to continue for IE8 and below, you should take a closer look at line 1471 of the source. Here is a snippet (it's quite long, this starts around character #2275):
'\74!--[if IE]\76\74script
The !--[if IE] there is part of an IE conditional comment. You can change that snippet like so, and it will still target IE8 and below, without affecting IE9:
'\74!--[if lte IE 8]\76\74script
Let me know if you have any further issues!
The page has 104 validation errors — I’d start by fixing those if I were you.
Almost certainly it is because the page is invalid. Also, I really would think about starting again with this page as it is overly complex markup.
Guys. Figured it out (with great help from andyb and Paul D.)
The validator pointed to some unpaired </div> tags that I removed. Now it is working flawless.

How could be HTML markup working in Safari and not working in Chrome

The problem is on my blog - blog.dynback.com.
Right panel goes down in Chrome, and stayed normal in all other browsers including Safari 4. And without Firebug its hard to find where is the problem.
You have errors in your markup, fix those first, at least the missing end-tags.
Validate here: http://validator.w3.org/check?uri=http%3A%2F%2Fblog.dynback.com
I think it has do to with the JavaScript. I've noticed the issue appears after code snippets are highlighted. Chrome uses a different JavaScript engine than Safari. Maybe that's the problem.
Try to shrink the width of #main_content