border-radius.htc not working in q2a template

Question

I have changed the css according to instructions.

I work with rounded corners, and for that to work in intenet explorer I need border-radius.htc.

On my main site this works like a charm. On the q2a part of that site I have just copied all stuff from the main site css, yet now the border-radius.htc does not work properly.

Apparently the templating system that q2a uses, screws up things somehow.

Anybody know how to fix this?
 
Here is the code that I use, all works ok in firefox, but not in ie, yet exact same code works fine in my cms on the same domain. Of course I copied the border-radius.htc to the q2a root.

.qa-sidebar {-moz-border-radius:10px;-webkit-border-radius:10px;-khtml-border-radius:10px;border-radius:10px;behavior:url(border-radius.htc);border:2px solid #D8F4FD;padding-top:12px;padding-right:8px;padding-bottom:10px;padding-left:8px;background-color:white;color:#000066; font-size:14px;margin-bottom:1em;float:right; width:180px;}

.qa-main {-moz-border-radius:10px;-webkit-border-radius:10px;-khtml-border-radius:10px;border-radius:10px;behavior:url(border-radius.htc);border:2px solid #D8F4FD;padding-top:5px;padding-right:5px;padding-bottom:5px;padding-left:5px;background-color:white;color:#000066;float:left; margin-bottom:1em; width:760px;}

.qa-nav-main {-moz-border-radius:10px;-webkit-border-radius:10px;-khtml-border-radius:10px;border-radius:10px;behavior:url(border-radius.htc);border:2px solid #D8F4FD;padding-top:5px;padding-right:5px;padding-bottom:5px;padding-left:5px;background-color:white;color:#000066;}

.qa-a-item-selected {-moz-border-radius:10px;-webkit-border-radius:10px;-khtml-border-radius:10px;border-radius:10px;behavior:url(border-radius.htc);background:none repeat scroll 0 0 #EEF9FD;border:1px solid #D8F4FD;clear:both;margin:0px 0;overflow:hidden;padding:5px 10px;text-align:left;font-size:14px;}

thanks

Ollie

Answer 1

To make the url() declaration in CSS work, you need to copy the border-radius.htc file to be alongside your qa-styles.css file.

Comments

that is not how it works, unless I call the htc file with a link to the dir where the css and the htc are located.

Maybe I was not clear enough above, there is no trouble in getting the htc file to be accessed, the trouble is in what happens when it does get accessed, let me explain.

When I open the page in ie8 I first see the square borders, then htc is called in and then I hardly see any border left And I get a message on my browser bottom telling me there is a conflict regarding the htc file.

Mind you, I do exactly the same on my main site, and on ie8 I see the square border first, then htc kicks in and I see the nice round corners.

In the q2a css I have tried to add the rounded corner technique to one of the current css statements AND I tried using it standalone with a new css statement.

Both work in FF and show the same trouble in IE8, apparently something in the q2a templating conflicts with the htc rounded border technique.

Perhaps give it a try on the demo site and see how it works?