Forum:What is the best CSS code to use to resolve IE8 display issues?

It has been brought to my attention again that certain colored div boxes we are using on our main page are not displaying the proper colors for those using IE8 while those using firefox seem to have no problems.

EXAMPLE SCREENSHOT: Using Internet Explorer 8

EXAMPLE SCREENSHOT: Using Firefox

I'm not sure if there's some sort of code that needs to be changed in our div box or if there is code that I need to add/change in our MediaWiki.css.

Seems like there was some code that needed to be added to MediaWiki.css to resolve this issue but it's been so long ago and even with searching high and low I can't seem to find or figure how to fix this.

Anyone's help would be super. I know our users who prefer to use IE would not appreciate hearing they HAVE to use a particular browser to see the pages display correct. Thanks in advance for the assistance!


 * The main differences in IE browsers are the following:
 * IE8 cannot render the border-radius or box-shadow styles.
 * IE browsers cannot render gradients the way other browsers do. However, it's a moot point in this case, because the gradients you have in your divs are useless.  looks the same as   so there's no need to use a gradient property that won't render in IE.
 * --Gardimuer { ʈalk } 22:36, September 19, 2011 (UTC)


 * Thanks so much! That resolved the color issue.  The last bit of issue is that the boxes when viewed using the IE browser are square cornered, yet when viewed using Firefox they are curved.  Would this be a "-moz-border-radius:3ex; border-radius:3ex;" issue?  and if so, is there another way I could code this to get the same curved box corners for IE?


 * Any IE browser since IE9 can render the border-radius and box-shadow properties fine. It's up to you whether you want to support the obsolete IE versions before 9, but if it were me I would just tell people who complain that they need to update their browser to the latest version.
 * The only way (that I know of) to give curved corners without the border-radius properties is to use border images. See this link for more information about that: --Gardimuer { ʈalk } 18:05, September 20, 2011 (UTC)


 * Try using border-radius in addition to that one.
 * 16:09, September 20, 2011 (UTC)


 * I think "border-radius" is CSS3 and not working yet... or am I wrong? -- Weas-El ✉  18:12, September 20, 2011 (UTC)


 * As I mentioned above, border-radius works in IE9. It also works in the most current versions of all major browsers. See http://www.w3schools.com/cssref/css3_pr_border-radius.asp --Gardimuer { ʈalk } 20:33, September 20, 2011 (UTC)