Using CSS3 Pie: border-radius not showing up?

I’ve been doing a bit with the CSS3 property border-radius and I have been finding myself wanting a more manageable method of using rounded corners in IE that could also scale well. So for me the options were to use an HTML Component (HTC) file, or to use static images. In my head I visualized the pros and cons of the two methods. I weighed the pros and cons of both of them:

Using HTC

Pros: can easily change the size of the element
Cons: sometimes buggy to work with, even if it works for you it doesn’t mean it works everywhere

Using Images

Pros: works everywhere
Cons: doesn’t scale

After debating about it I came to the conclusion that if I can get the HTC file to work properly it may leave a small segment of users without the border-radius. To me that wasn’t a big issue because the border-radius is more aesthetic than functional so I accepted the risk. I did some research and I picked out CSS3 Pie to use because it had the most documentation and support. It was pretty easy to get up and running with it, which was a quick ego booster. Unfortunately I did hit some snags early on. The bit of advice I kept seeing was that if it doesn’t show up at all, or the border is skewed a bit, to make sure the element has position:relative; and z-index:0; on the element. This most likely keeps the absolutely positioned borders inside of the element and the z-index keeps the borders “above” the old 90 degree borders.

I was able to get the borders to work quite easily on half of my elements and then I was stuck. I spent an hour or so researching problems and possible solutions until it hit me. I was using jQuery to add a special class for just IE and my CSS classes were utilizing this class. I was a victim of poor timing. CSS3 Pie was processing and rendering the border-radius before jQuery had a chance to add the class. All I had to do was to modify my CSS so that it didn’t utilize the class. The other option of course would have been to use IE conditionals to include a different stylesheet. I normally do not do that to keep down the numbers of requests per page load.

The summary

Be mindful of the way you are referencing CSS3 Pie in your CSS file. Make sure none of the classes used to target the element are added after the page has loaded by Javascript. HTC files are processed inline before the Javascript is.

Leave a Reply

Your email address will not be published. Required fields are marked *