Border-radius Workaround For Ie ?

[sircharlo]

Hey all ! I'm building a website which uses rounded corners using CSS, no images, and that's the way i want it.However, I found that the border-radius.htc method for IE does not work for me ! It only works on one element on my page !Does anyone know of a better workaround ? (Plz, without using images !)Thanks alot !

[sircharlo]

Update: I tested the htc file with the sample page given, and it works !However, with my css, it doesn't. Anyone know why ?

/* =================================================        COLORS USED:        #005A85 = BASE TURQUOISE BLUE, BACKGROUND    #003650 = DARK BLUE    #ccdee7 = LIGHT BLUE    #669cb6 = INACTIVE TAB BLUE================================================= */body {    background-color:#005A85;    margin: 0;    padding: 0;    font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif;    color: #222222;}h1, h2, h3, h4, h5, h6 {    color: #111111;}a {    color: #333333;}a:hover {    text-decoration: none;    color: #000000;}/* Header */#headerc {    width: 83%;    height: 120px;    margin: 0 auto;    background: url(images/img2.jpg) no-repeat center bottom;}#headerl {    width: 25%;    float:left;    height: 120px;    margin: 0 auto;    background: url(images/img2.jpg) no-repeat center bottom;}#headerr {    float:right;    width: 75%;    height: 120px;    margin: 0 auto;    background: url(images/img2.jpg) no-repeat center bottom;}/* Logo */#logo {    float: left;    background: #ccdee7;    margin-top: 25px;    padding: 20px 35px 20px 35px;    position: relative;    -moz-border-radius: 25px;    -webkit-border-radius: 25px;        behavior: url(border-radius.htc);    border: #003650 solid 3px;    }#logo * {    /*text-transform: lowercase;*/    color: #005A85;}#logo h1 {    letter-spacing: -3px;    font-size: 45px;    font-family: "Trebuchet MS", Geneva, Tahoma, sans-serif;    margin-bottom: -15px;    padding: 0px;    margin: 0px;    text-align: center;    color: #003650;}#logo .part2 {    letter-spacing: -3px;    font-size: 50px;    font-family: "Arial Black", Geneva, Tahoma, sans-serif;    color: #003650;}#logo h2 {    letter-spacing: 1px;    font-size: 10px;    padding: 0px;    margin: 0px;    margin-top: -5px;     text-align: center;}/* Menu */#menu {    float: right;    height: 120px;}#menu ul {    margin: 0;    padding: 84px 0 0 0;    list-style: none;}#menu li {    display: inline;    margin: 0;    padding: 0;}#menu a {    background: #669cb6;    display: block;    float: left;    margin-right: 3px;    padding: 10px 20px;    text-decoration: none;    text-transform: lowercase;    font-size: 1em;    font-weight: bold;    color: #003650;    height: 16px;    -moz-border-radius-topleft: 15px;    -webkit-border-top-left-radius: 15px;        behavior: url(border-radius.htc);}#menu a.active {    border-top: #003650 solid 3px;    border-left: #003650 solid 3px;    border-right: #003650 solid 3px;    background: #ccdee7;    color: #003650;/*    -moz-border-radius-topleft: 0px;    -webkit-border-top-left-radius: 0px;    -moz-border-radius-topright: 15px;    -webkit-border-top-right-radius: 15px;    /*border-top: white solid 4px;/*    color: #196a91;*/}#menu a.active:hover {    color: #003650;    background: #ccdee7;    cursor: default;    /*border-top: white solid 4px;/*    color: #196a91;*/}#menu a:hover {    background: #003650;    color: #ccdee7;}/* MasterWrap */#masterwrap {    width: 100%;    background-color:#005A85;    margin: 0 auto;    padding-bottom: 15px;    }/* Wrapper */#wrapper {    width: 80%;    margin: 0 auto;    padding:60px 60px 20px 60px;    -moz-border-radius: 30px;    -webkit-border-radius: 30px;    border: #003650 solid 3px;/*    -moz-border-radius-topright: 30px;    -webkit-border-top-right-radius: 30px;    -moz-border-radius-bottomright: 30px;    -webkit-border-bottom-right-radius: 30px;    -moz-border-radius-bottomleft: 30px;    -webkit-border-bottom-left-radius: 30px;*/    behavior: url(border-radius.htc);        background-color:#ccdee7;}/* Content */#content {    width: 100%;    margin: 0 auto;    background-color:auto;}/* Column One */#colOne {    float: left;    width: 65%;}#colOne h2 {    margin-top: 0;    font-size: 2.2em;}#colOne p, #colOne ul, #colOne ol {    line-height: 160%;}#colOne .credits {    margin-bottom: 20px;    padding: 5px 0 20px 8px;    border-bottom: 1px solid #2C2C2C;}#colOne .credits p {    margin: 0;    padding: 0;    line-height: normal;}/* Column Two */#colTwo {    float: right;    width: 30%;}#colTwo ul {    margin: 0;    padding: 10px 0 0 0;    list-style: none;}#colTwo li {    margin-bottom: 20px;}#colTwo li li {    margin-bottom: 20px;}#colTwo li li li {    list-style-type: none;}#colTwo li ul {    padding-left: 20px;    list-style: square inside;}#colTwo h2 {    padding-bottom: 5px;    font-size: 1em;    color: #111111;    padding-left: 20px;    border-bottom: 1px solid #2C2C2C;}#textfield1 {}#submit1 {}/* Footer */#footer {    clear: both;    width: 100%;    margin: 0 auto;}#footer p {    margin: 0;    padding: 0;    text-align: center;    font-size: smaller;}

Here's a live demo.Doesn't work !However, here's the sample page, which works !WHY ????Thanks

[sircharlo]

Come on guys, please !!

[jeffman]

The only .htc files I've found (like the one you're using) seem to work only with the border-radius property. That is, the .htc files works when you want the same radius for all 4 corners and use that shorthand property. When you specify topright and so on, they do not work. Examine your .htc file and see how it gets the correct values. You'll see why this happens. (I think I'm right on this.)I have not tried rewriting the .htc file to go after those other properties, but it's worth a try, maybe. Looks like a lot of work, though, and I don't have a reference.You should also make sure your server is dishing up the correct mime type for the .htc file. I've read that this can be a problem.