IE8 rendering problems with h2

Question

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 !

Answer 1

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.