IE & round corners [Archive] - Dynamic Drive Forums

Larry314

08-20-2012, 04:04 PM

I've read several sites about how to get round corners in IE (works fine in Firefox, Safari and Chrome. Works partially in Opera.)
META tags (2 because of different places I read info)
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<meta http-equiv="X-UA-Compatible" content="IE=9" >

CSS (partial)
td.roundcorners { border-radius: 5px; border-color: #CCC; padding-left: 5px; }
table.allround { border-radius: 15px; padding-left: 5px; } /* only one table used */
table.upperround { border-top-left-radius:15px; border-top-right-radius:15px; padding-left: 5px; } /* two tables used adjacent to each other because of columns disparity */
table.lowerround { border-bottom-left-radius:15px; border-bottom-right-radius:15px; padding-left: 5px; }
input, select, textarea { border-radius: 5px; border-color: #0000cd; padding-left: 5px; }

Go to www.basketbasics.com then click on Reed & Cane (the only one I have the META tags in for the moment).

In Firefox it has all the rounded corners.

In IE9 it doesn't. When I go to developer tools (F12) and the CSS tab it shows the CSS is loading but the border-radius is ignored.

?

jscheuer1

08-20-2012, 05:12 PM

Those meta tags really aren't all that important. What you need for IE 9 to render CSS 3 is a standards invoking DOCTYPE like:

<!DOCTYPE html>

instead of:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

The browser cache may need to be cleared and/or the page refreshed to see changes.

The meta tags will only help if the browser is in compatibility mode for some reason, and will not take effect unless there is a standards invoking DOCTYPE as mentioned above and they are parsed before the rendering version is established. To do that, they have to come before scripts and styles and should be the first meta tags. And either one will work, the second one is ignored anyway.