Question

I’m having an issue with a client website, there are shadows or borders appearing around divs in the header. I don’t actually want these and don’t know how to get rid of them. This is only happening in IE7 / 8. IE9, Firefox, Safari and Chrome are all fine. Site is go-movil.es

Any help appreciated.

Regards,
Stephen

Answer 1

If you only want the shadows to show up in everything but ie7/8 you can use conditional comments to implement a specific css that has styles that clear the shadows.

in head of html:

<!--[if lte IE 8]><link rel="stylesheet" href="lte-ie-8.css"><![endif]-->
<!--[if lte IE 7]><link rel="stylesheet" href="lte-ie-7.css"><![endif]-->

css (lte-ie-8.css and lte-ie-7.css):

body > header .nav > li.current-menu-item > a, body > header .nav 
> li.current-menu-ancestor > a, body > header .nav > li.current-page-ancestor 
> a, body > header .nav > li.current_page_parent > a
{
    box-shadow: none;
}

source: http://mathiasbynens.be/notes/safe-css-hacks

Hope this helps