Using CSS3Pie htc for border-radius in IE8
Try adding
position:relative;
z-index: 0;
as suggested here http://css3pie.com/forum/viewtopic.php?f=3&t=10
This question is similar to the one posted here:
CSS3 PIE - Giving IE border-radius support not working?
How to apply border radius in IE8 and below IE8 browsers?
Option 1
http://jquery.malsup.com/corner/
Option 2
http://code.google.com/p/curved-corner/downloads/detail?name=border-radius-demo.zip
Option 3
http://css3pie.com/
Option 4
http://www.netzgesta.de/corner/
Option 5
See this question
EDIT:
Option 6
https://code.google.com/p/jquerycurvycorners/
Can't apply border-radius in IE8 using PIE.htc
Please check your path to the pie.htc. The path has to be relative to the html-page, not to the css-file. That is an often made error when linking an htc file.
Does not work border-radius IE8
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-shadow
s 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;
CSS3 + HTML5SHIV + CSS3PIE Border-radius NOT working on IE8 but working on IE7,9,10
You're using PIE 2.0 beta, the .htc
file for PIE 2.0 simply loads an external javascript file PIE_IE678.js
. You need to upload PIE_IE678.js
to your server and then inform PIE where the javascript file is located.
The easiest way is to add the PIE_IE678.js
file to the same directory as PIE.htc
and then use the absolute URL to the PIE.htc file in your css file, e.g:
behavior: url('http://www.quickseorankings.com/dev/PIE.htc');
and your directory structure would need to be:
quickseorankings.com/
dev/
PIE.htc
PIE_IE678.js
Note: Don't manually load any of the PIE .js files, the .htc file loads the additional javascript files for you.
Css3pie Round Corners not working in IE8 with :after
Try using the pie syntax.
-pie-border-radius: 9px;
try loading pie relative to your CSS documents location, i.e.
behavior: url(/your/path/theme/inc/PIE.htc);
Edit:
The PIE.htc requests should respond with the mime type "text/x-component" - or IE won't touch the behaviour. Maybe your issue is with Serving the correct Content-Type, please see this for more info:
http://css3pie.com/documentation/known-issues/
Related Topics
How to Make Div Background Color Transparent in CSS
Html/CSS Popup Div on Text Click
Make Outer Div Be Automatically the Same Height as Its Floating Content
Adjacent Divs with Angled Borders
Remove "Whitespace" Between Div Element
<Main> Element Not Working in Internet Explorer 11
How to Link a CSS File from HTML File
How to Position a Div in the Middle of the Screen When the Page Is Bigger Than the Screen
How to Send an Inner <Div> to the Bottom of Its Parent <Div>
Nested Rows with Bootstrap Grid System
Two Divs Next to Each Other, That Then Stack with Responsive Change
Difference Between Justify-Content VS Align-Items
Retina Displays, High-Res Background Images
Finding "Equivalent" Color with Opacity