Does not work border-radius IE8 - html

Question

To implement the border-radius in IE8 I use border-radius.htc
The block in which to work correctly realzovat border-radius:
.mc-button
{
-moz-transition: all 0.218s ease 0s;
-moz-user-select: none;
background-color: #CBCBCB;
background-image: -moz-linear-gradient(center top , #CBCBCB, #DCDCDC);
border: 1px solid #DCDCDC;
color: #FFFFFF;
cursor: default;
display: inline-block;
font-size: 11px;
font-weight: bold;
height: 29px;
line-height: 29px;
min-width: 70px;
padding: 0 8px !important;
text-align: center;
overflow: visible;
font-family: inherit;
font-size: inherit;
float: left;
text-decoration: none;
display: block;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-moz-outline-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-family: Arial, Sans-Serif !important;
behavior:url(Content/border-radius.htc);
}
According to the list of attached files - border-radius.htc connects to the page
Can you please tell how to solve the problem?
UPDATE (06/13/2012)
If the code is replaced by a button:
.mc-button
{
border: 1px solid #696;
height: 29px;
line-height: 29px;
min-width: 70px;
text-align: center;
padding: 0 8px !important;
overflow: visible;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
float: left;
display: block;
background: #00ADEE;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#00ADEE), to(#0078A5));
background: -webkit-linear-gradient(#00ADEE, #0078A5);
background: -moz-linear-gradient(#00ADEE, #0078A5);
background: -ms-linear-gradient(#00ADEE, #0078A5);
background: -o-linear-gradient(#00ADEE, #0078A5);
background: linear-gradient(#00ADEE, #0078A5);
-pie-background: linear-gradient(#00ADEE, #0078A5);
behavior: url("Content/PIE.htc");
}
and to declare as:
<a id="login_button" class="mc-button mc-button-submit ">SomeText</a>
.mc-button-submit
{
border: 0px solid #0076A3;
background: #00ADEE;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#00ADEE), to(#0078A5));
background: -webkit-linear-gradient(#00ADEE, #0078A5);
background: -moz-linear-gradient(#00ADEE, #0078A5);
background: -ms-linear-gradient(#00ADEE, #0078A5);
background: -o-linear-gradient(#00ADEE, #0078A5);
background: linear-gradient(#00ADEE, #0078A5);
-pie-background: linear-gradient(#00ADEE, #0078A5);
color: #FFFFFF;
text-align: center;
}
Rounding it disappears. Adding to the .mc-button-submit line behavior: url ("Content / PIE.htc"); does not help.
Can you please tell how to connect a second class with the parameters of the background?

Answer 1

Standalone .htc hack is not working for background gradient and border-radius both at the same time.
Try to replace css gradient with simple image. This trick will work.
Also you can use css3pie (thanks to #dop-trois) — this pure Javascript tool is more perfect than standalone .htc file.
PS. Inset box-shadows cannot be implemented in both solutions.
PPS: the code you need is here: (i changed it a bit to make it more valid and correct):
.mc-button {
font: bold 11px/29px Arial, Helvetica, sans-serif !important;
text-align: center;
text-decoration: none;
color: #FFFFFF;
border: 1px solid #DCDCDC;
height: 29px;
min-width: 70px;
padding: 0 8px !important;
overflow: visible;
display: block;
float: left;
/* Unique link for this gradient — http://www.colorzilla.com/gradient-editor/#cbcbcb+0,dcdcdc+100;Custom */
background-color: #CBCBCB;
background: -moz-linear-gradient(top, rgba(203,203,203,1) 0%, rgba(220,220,220,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(203,203,203,1)), color-stop(100%,rgba(220,220,220,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(203,203,203,1) 0%,rgba(220,220,220,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(203,203,203,1) 0%,rgba(220,220,220,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(203,203,203,1) 0%,rgba(220,220,220,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(203,203,203,1) 0%,rgba(220,220,220,1) 100%); /* W3C */
/* css3 stuff below: (via css3please.com) */
/* no one prefix except `-webkit` is needed nowadays for `border-radius` */
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition: all 0.218s ease-out;
-moz-transition: all 0.218s ease-out;
-ms-transition: all 0.218s ease-out;
-o-transition: all 0.218s ease-out;
transition: all 0.218s ease-out;
/* PIE specific accordingly http://css3pie.com/documentation/q-and-a/ */
behavior: url(PIE.htc);
}
You should be sure that you have included PIE.htc correctly (important!)
Relative questions
Using CSS3Pie htc for border-radius in IE8
CSS3 PIE - Giving IE border-radius support not working?
CSS3 PIE - Giving IE border-radius support not working?
Accordingly to answers possible problems may be in mime type ("text/x-component").
Also possible solution may be:
position: relative;
z-index: 0;

Answer 2

To apply gradients and border-radius, I recommend CSS3 Pie. It's the most powerful tool i know, to apply CSS3 properties in IEs.
Apply gradients in IEs):
#myElement {
background: #CCC; /*fallback for non-CSS3 browsers*/
background: -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*old webkit*/
background: -webkit-linear-gradient(#CCC, #EEE); /*new webkit*/
background: -moz-linear-gradient(#CCC, #EEE); /*gecko*/
background: -ms-linear-gradient(#CCC, #EEE); /*IE10*/
background: -o-linear-gradient(#CCC, #EEE); /*opera 11.10+*/
background: linear-gradient(#CCC, #EEE); /*future CSS3 browsers*/
-pie-background: linear-gradient(#CCC, #EEE); /*PIE*/
behavior: url(PIE.htc);
}​
Apply border-radius in IEs):
#myAwesomeElement {
border: 1px solid #999;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(path/to/PIE.htc);
}​
You'll need PHP to get it work.
Live demo on CSS3 Pie's website.
Btw.: Applying border-radius & gradients the same time is possible with this tool ;)
Hope this helps :)

Answer 3

To apply Gradients, Box shadows and Border-radius, I recommend CSS3 Pie. I used it in cook&smile project and it fully works in IE.
*{ behavior:url(path/PIE.htc);}
.border_radius_div{ position:relative; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
.gradient_div{ position:relative;
background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -webkit-linear-gradient(#EEFF99, #66EE33);
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: -ms-linear-gradient(#EEFF99, #66EE33);
background: -o-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33); }
Visit this website to explore yourself further.
http://css3pie.com
Note:
Don't forget to use position (relative or absolute) where we are using Border-radius, gradients and box shadows.
Don't forget to use behavior:url(xhtml_folder/PIE.htc);
And the important thing is don't forget to put the PIE.htc in xhtml folder.