View Full Version : Need Help with corners in IE9

11-19-2011, 05:07 PM

Just starting on building a website and want to add rounded corners to the bottom of the #wrapper and #footer DIV tags. The corners work fine in FF (of course) but I cannot get them to work at all in IE9. I thought they are supposed to work in IE9, but just not older browsers.

Appreciate if anyone can tell me how to get these working in IE9.

The code I have so far is below.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background: #f0f url(_images/Bkgnd.jpg) repeat-x;
text-align: center;
margin-top: 25px;
html, body {
margin: 0px;
padding: 0px;
#wrapper {
background: #D6D6D6;
width: 930px;
position: relative;
margin: 0px auto;
text-align: left;
border-radius: 0px 0px 20px 20px;
-webkit-border-radius:0px 0px 20px 20px;
-moz-border-radius:0px 0px 20px 20px;
#header {
background: #F6C;
height: 100px;
width: 930px;
#mainNav {
background: #3C9;
height: 75px;
width: 930px;
float: none;
clear: none;
#mainContent {
background: #96F;
height: 300px;
width: 700px;
float: left;
#sideBar {
background: #F96;
height: 300px;
width: 230px;
float: right;
#footer {
background: #6F6;
height: 250px;
width: 930px;
clear: both;
border-radius: 0px 0px 20px 20px;
-webkit-border-radius:0px 0px 20px 20px;
-moz-border-radius:0px 0px 20px 20px;
<div id="wrapper">
<div id="header">Content for id "header" Goes Here</div>
<div id="mainNav">Content for id "mainNav" Goes Here</div>
<div id="mainContent">Content for id "mainContent" Goes Here</div>
<div id="sideBar">Content for id "sideBar" Goes Here</div>
<div id="footer">Content for id "footer" Goes Here</div>

11-19-2011, 06:25 PM
One of these two pages might help: