Header disappears and lists become unstyled in IE 8 and below

Question

It was brought to my attention that in IE 8 and below, my header disappears and my lists become unstyled.

Meaning, they look different than what they should and they have bullets.

Why is this happening and how can I fix it.

I know I haven't included the html5 shim / html5 shiv yet, is that causing the header to disappear? What about my <main> element and the list-styling?

Here is a link to the page where this is happening: https://dl.dropboxusercontent.com/u/270523/help/search/new.html

And here is what it looks like in IE8: http://pageaffairs.com/sp/so-16270338.png

Answer 1

Older IEs does not render HTML5 tags therefore your styling applied to them are ignored. (They don't even render as blocks like "oh well, lets pretend it's a div". No, it's totally ignored).

And yes, as you said, the best would be add html5shiv to the header of your code, like this:

<!--[if lt IE 9]>
<script src="path/to/your/shiv.js"></script>
<![endif]-->

This means that if lower than IE 9, apply this script.

Additionally, the same occurs with CSS3 stuff, like border-radius and stuff. For that, use CSS3Pie, which is handy.

.someRoundCorner {
    border-radius:4px;
    behavior:url(path/to/css3pie/htc);
}

As a suggestion, for the time being still use divs with id equal to the HTML5 tag you actually wanted if your main audience uses IE < 9. Better than making use of .js (and if .js is disabled, layout will break like now). When the time comes when the old IEs are not more supported, will be easier to search and replace your documents having the id equal the tag you wanted.

Update: Your css is main ul, [role="main"] ul, #main ul, but since IE have no idea what is the tag main, it throws the UL out and so, your CSS selector does not match. See in this image that all elements he does not know, he transforms into an empty element:

On left is the code it actually rendered while the right is the real source. As you see, the UL is out of main.

Answer 2

As indicated in this question's accepted answer, IE8 does not treat HTML5 elements very nicely. Not only does it not style these elements, but it sometimes (as you are seeing) makes them seem to disappear entirely. I've seen this firsthand on a site my team developed. IE8 was turning all the <section> tags we had used into <section />, which just messed up all of our content and styling. You're going to need to use the HTML5 shiv script to get it to work (Modernizr fixed it for us, and the HTML5 shiv script is just a part of it, but you should likely only need the shiv script at a minimum).