0

I have an asp.net app with a dropdownlist control of larger width and vertically centered aligned text.

Yesterday my dropdownlist control suddently lost it's css width/alignment properties displaying incorrectly at the browser (IE 10).

After hours searching the problem, I noticed it was because I had accidentaly hit the "compatibility mode" button at the address bar (next to the url).

details on my post at: Vertically align text in a asp.net dropdown list control.

After hitting back the compatibility mode button it starts working well back again.

Since that happened to me, I wondered it could happen to end users to and so display it incorrectly to them as well.

Does anyone know how to avoid that and create a dropdownlist/web app that doesn't unformat if the user accidentally clicks that button?

By the way, I also used the IE dev tools to test my page on older browser versions and noticed that it works well on IE 9 and 8 as well, but the dropdownlist messes up on IE7.

Thanks!

Community
  • 1
  • 1
user2974961
  • 335
  • 1
  • 6
  • 14

1 Answers1

0

Your best option is to add a conditional css reference which kicks in if the IE browser version is less than a given amount. For example if you add a new css file which contains styles specific to IE7. These commented out sections are IE hacks. This sytle sheet will not take effect unless the browser is IE7.

 <!--[if IE 7]>
      <link rel="stylesheet" type="text/css" href="/styles/main.IE7.css"" />
    <![endif]-->

Then you need to adjust your styles in this style sheet to suit IE7.

Also sometimes IE is set to display intranet sites in compatibility mode. See this for adding a setting in the web.config which will prevent this X-UA-Compatible is set to IE=edge, but it still doesn't stop Compatibility Mode

Community
  • 1
  • 1
Leigh Ciechanowski
  • 1,297
  • 17
  • 33
  • my concern is not so much to support older versions such as IE7. My concern is if the user has a newer version such as IE10 and accidentaly clicks the compatibility mode. The app will then unformat. Is there a way to block the compatibility mode button through code? – user2974961 Jan 07 '14 at 00:37
  • See this question I believe you can add a meta tag to your page which will block compatibility mode http://stackoverflow.com/questions/6348959/how-to-disable-compatibility-view-in-ie – Leigh Ciechanowski Jan 07 '14 at 12:48