Using CSS3Pie Htc for Border-Radius in IE8

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-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;

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



Leave a reply



Submit