5

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: enter image description here

And here is what they look like in IE8 (wrong):

enter image description here

How can I get rid of it. Please help, can`t figure it out why this happens. Thank you very much !

Erik Schierboom
  • 16,301
  • 10
  • 64
  • 81
Thomas233
  • 319
  • 2
  • 6
  • 14
  • 2
    [`border-radius`](http://msdn.microsoft.com/en-us/library/jj127319%28v=vs.85%29.aspx) is not supported by IE8, it's available from IE9 on. – Teemu Jun 10 '13 at 18:46
  • Try this http://stackoverflow.com/questions/9426979/border-radius-for-ie8 – br araujo Jun 10 '13 at 18:49
  • thx, didn`t know about it. It`s not mandatory for the design so I can live with it ignored in IE8. However if I remove it nothing changes, so I suppose it`s not the reason for the rendering issue ? – Thomas233 Jun 10 '13 at 19:13
  • here is a very basic fiddle, but can`t be run in IE8 so not very helpful maybe: http://jsfiddle.net/H3NSv/5/ – Thomas233 Jun 11 '13 at 09:52

1 Answers1

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.

Rob
  • 14,746
  • 28
  • 47
  • 65