Using CSS3Pie htc for border-radius in IE8

Question

I\'m using the CSS3Pie htc file to enable border-radius in IE8, but I\'m getting no effect. My CSS is:

button {
    border-radius: 4px;
    -web         


        

Answer 1

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?

Answer 2

I actually had this problem for a completely different reason.

The border-radius will not work if a filter is applied to the same element. I was applying the border-radius to a button with a linear gradient applied as a filter. As soon as I removed the filter the border-radius worked.

This is documented behaviour and gradients should be applied using -pie-background:

http://css3pie.com/documentation/supported-css3-features/#gradients

Answer 3

behavior: url(PIE.htc);

Make sure there is no space between the url and ( as this stopts it from working at all in IE8

Answer 4

As Daniel Rehner stated, you need to use the position: relative and z-index properties for IE8. If you are using a website with sub directories to call the CSS file, you will also need to use an absolute path in your CSS to PIE.htc - this was one part of our issue.

The other part of the issue could be that your server is not outputting the PIE.htc file as text/x-component. You can correct that via IIS or Apache, or call the PIE.php script in your CSS. More info here: http://css3pie.com/documentation/known-issues/#content-type

Both of these issues had gotten us, and hope they help you out.

Answer 5

Just in case anyone is trying to apply this to table cells, you'll need to apply position: relative to the table element (and not the tdor th, even though those are the elements being rounded).

Answer 6

The URL of PIE.htc as referenced in behavior: url(PIE.htc); is a relative URL, so it is probably looking for it in the same directory as the stylesheet, so I'd suggest adding a slash to make it an absolute URL. But you say you've already done that.

Check that the URL you're specifying does actually load the PIE.htc file - ie put that URL directly into your browswer and see what comes out. It is possible that your web server is not serving it correctly for one reason or another (not recognising the mime type? etc)

Have you gone through the known problems on the PIE site? Have you added position:relative; to your style? Could it be the known z-index issue?

You specify that it doesn't work in IE8. Have you tried it in IE7? IE6? Same result? (this will eliminate ths possibility of it being an IE8-specific issue)

By the way -- unrelated point, but you should put the border-radius style below the versions with the browser-specific prefixes. This is the standard way to do things, as it means that when for example, Firefox starts supporting border-radius, it'll pick up the standard style over -moz-border-radius. If you've got the -moz version below it, that one will continue getting used, which may not be what you want.