1

The Menu for my site is acting odd in IE now, where it was fine before. I moved the files for the site to a company network share and now it will not display the CSS properly. The CSS should add border radius/rounded edges, it z-indexes so it goes on top other divs, etc, and after the move it does not do this anymore. If I hit f12 in IE and select IE10 - not IE10 compatibility - it does load fine.

Is there something I need to fix in my CSS?

    height:41px;
background: #fff;
background-color: #000000;
-moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
background: #565656;
background: -moz-linear-gradient(#565656 0%, #323232 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
background: -webkit-linear-gradient(#565656 0%, #323232 100%);
background: linear-gradient(#565656 0%, #323232 100%);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
Dave
  • 13
  • 2

1 Answers1

0

IE10 compatibility mode emulates IE7, which supports almost none of the used css3 properties. Unless you start using IE hacks like this one for border-radius, they will not render. (Both box-shadow and border-radius are IE9+)

This is why your site should follow the ideals of . You should debug so positioning and stacking (z-index) work as they are designed, but minor eye candy may go out the window.

Community
  • 1
  • 1
Mooseman
  • 18,763
  • 14
  • 70
  • 93
  • Thank you for your explanation, makes complete sense. I added a piece in the header that helped fix the issue - the site no longer auto-opens in compatibility mode. – Dave Dec 16 '14 at 00:00