0

I have implemented a rounded corner control using css ,it is displayed correctly in firefox but not in IE 10 can anyone point out the change I need to make it working in both.I saw some answers pointing to add pie.htc to the css folder ,I tried that as well

.DropDownList
{
    background-color: #c0c0c0;
    border: 1px solid #000000;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    border-radius: 10px;
}

Tried adding overflow:hidden ,it makes it not appear in Firefox as well.

Lav
  • 99
  • 1
  • 13

2 Answers2

0

Taking a look at this answer, you might need to inspect your X-UA-Compatible tag and make sure you aren't referencing a previous version of IE:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

(Border radius support started with IE9).

Community
  • 1
  • 1
Carson Darling
  • 310
  • 1
  • 9
  • If I specify ie=9 the website appears different and if I specify ie=edge nothing happens,there is a rounded corner in the background but the drop downlist is a square above it. – Lav Apr 11 '13 at 21:11
0

Also have a look at this page: http://geekswithblogs.net/ihaynes/archive/2012/09/16/ie10---be-prepared.aspx

I claims that IE10 can enter 'compatibility mode' while developing ASP.Net locally and provides a workaround.

If you locally preview a site that uses HTML5 and CSS3 features (placeholder text, round corners etc) in IE10, using the EW Development Server or IIS, you may find that these features don't display.

This is because the default browser mode for intranet sites in IE10 is 'Compatibility mode'. You can change this in 'Tools - Compatibility View Settings' . Uncheck the 'Display intranet sites in Compatibility View' option.

Now you'll notice that there is also a setting 'Display all websites in Compatibility View'. What happens to your site if a user has this checked, intentionally or unintentionally? Your site won't display properly.

You can avoid this problem by forcing IE10 into it's highest or 'Edge' mode. You do this by adding the following meta tag to your pages or the DWT / ASP.Net MasterPage.

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

It's worth adding this to the existing IE Meta Tag snippets in EW V4.

EDIT: Added relevant quote. (Corrected spelling of 'compatibility'.)

Whistletoe
  • 573
  • 2
  • 10
  • Specifically: “the default browser mode for intranet sites in IE10 is 'Compatibility mode'. You can change this in 'Tools - Compatibility View Settings' . Uncheck the 'Display intranet sites in Compatibility View' option.” (Just to protect against link rot. And correct the “Compatability” typo.) – Paul D. Waite Apr 11 '13 at 21:05
  • I'm sorry, but i can't edit your comment :) http://www.merriam-webster.com/dictionary/compatible – Whistletoe Apr 11 '13 at 21:07
  • Oh I know: in the linked article, they spell it incorrectly. I’ve corrected that in my comment. – Paul D. Waite Apr 11 '13 at 21:14