Question

I’ve been browsing around the web and i’ve found a few things that suggest that you can use a file called bprder-radius.htc to make the border radius attribute work in IE.

I’ve added the bit of code it suggest but can’t seem to get it to work.

Here’s my source code

<div class="body">

<div class="menu">

    <p><a class="menuButton">Home</a></p>

    <p><a class="menuButton">Availability</a></p>

    <p><a class="menuButton">Treatments</a></p>

</div>

</div>

And my CSS

    .body {margin:auto; width:1096px; height:500px;}

.menu {position:relative; top:150px; overflow:hidden; -moz-opacity:.70; filter:alpha(opacity=70); opacity:.70; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; behavior: url(border-radius.htc);}

.menu p {text-align:center; width:124px; float:left; border:solid 1px #e94f7b; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px;}

Here’s what I get in IE with this code

And here’s what it should be

Any ideas why this wouldn’t be working?

Thanks in advance

EDIT

Link to page – http://jamietaylor-webdesign.com/cms/

Answer 1

Take a look at compass which builds off of sass. One of the interesting compass integrations is with PIE.

PIE looks similar to IE-CSS3 http://fetchak.com/ie-css3/ which was previously mentioned.