Ie8 | badlyDrawnToy

November 11th, 2009

IE8 Rounded Corners using jQuery

This site continues to receive a large amount of traffic from people searching for a solution to achieving rounded corners in IE8. Clearly, it’s a hot topic, and my previous post about using DD_Roundies has hopefully helped developers along their way.

I recently had an issue with DD_Roundies where the border width was 1 pixel out. Not sure why, but it prompted me to look for another solution. A simple plea for help on twitter resulted in the discovery of another library, and this time one built as a jQuery plugin.

Check out cornerz. It’s easy to use and so far, works like a charm.

Tags: CSS, ie8, JQuery

April 15th, 2009

IE8 Rounded Corners

Also see updated post about suitable jQuery plugin

Last night I finally got round to upgrading my Win XP VMWare image from IE8 beta to the production release. A bit slack on my behalf as the browser was released about 3 weeks ago. Still, I’d been testing websites in the beta release and all was cool.

Well, that’s what I thought. Last night I discovered that my company website, no longer worked. Looking into the problem this morning, I discovered that the culprit was a jQuery plugin that renders rounded/curvy corners.

I looked at a few other plugins, but none seemed to work. After a bit of Googling, I cam across an interesting blog entry from the guys at filmanentgroup, who are heavily involved in developing the jQuery UI API.

The blog entry highlighted an interesting piece of javascript development by Drew Diller that has nothing to do with jQuery. Drew has written an IE specific library called DD_roundies, that uses VML to produce the rounded corners.

The idea is that this code be used for browsers that don’t (yet) support CSS3 border radius. However, Drew has included an option to also render the CSS3 syntax for those browsers that support this feature.

I’ve now updated my site to use Drew’s code with CSS3 syntax support. This works in IE6, IE7, IE8, Safari, FireFox and Chrome. It doesn’t yet work in Opera, but this is only a matter of time (and perhaps a code update). If you want to support Opera, you can simply use conditional comments.

Tags: CSS, ie8, javascript, JQuery

1001 Fonts commented on November 17th, 2009 at 10:18 pm

Finally a solution for IE8, but for me it doesn’t respect the background colors of parent containers so I am seeing rounded corners with the cut out parts being white instead of transparent or the parent’s background-color :( This makes the plugin useless for me. I am just about to give up on IE8.

badlyDrawnToy commented on November 17th, 2009 at 10:47 pm

@1008. Have you tried setting the background colour as one of the options?

e.g. $(‘.myclass’).cornerz( {
‘radius’ : 12,
‘corners’ : ‘bl’,
‘background’ : ‘#000′
} )

Marco Barbosa commented on February 3rd, 2010 at 6:16 pm

I had the same problem as 1001 Fonts.

It won’t work well with a background..

Setting the color doesn’t work because the background is an image not just a color.

Guess I’ll have to wait. There’s not good solution for rounded corners on IE8 today.

Empiror commented on January 19th, 2011 at 1:42 am

I was able to get DD_Roundies working in IE8 without the 1 pixel issue occurring by commenting out lines 226 to 232 – the if statement starting with):

if (DD_roundies.IE8) {

Alun commented on April 15th, 2009 at 11:19 pm

IE8 is no longer RC? Where have I been?

Phil Thompson commented on April 21st, 2009 at 10:28 am

I installed IE8 last week and have actually been relived to find it’s rendering engine is very good. Admittedly it’s lacking a few CSS3 features that would have made it superb but I can happily sleep at night knowing all the websites I’ve created in the past two years look great in IE8 because it now handles CSS 2 properly.

Android commented on June 20th, 2009 at 3:43 pm

I cannot believe that IE8 still not supports rounded corners…

Alberto Lepe commented on August 27th, 2009 at 5:49 am

IE its getting somehow not that bad in their 8th version, but still score pretty awful in the acid 3 test: http://acid3.acidtests.org/, which means they are far from have a standard complain browser.
If you don’t know what is “ACID 3 TEST” read: http://en.wikipedia.org/wiki/Acid3

Vaughn commented on November 13th, 2009 at 6:41 pm

Howie,

I had written DD_roundies off, because when I looked at the DD_roundies page all the VML rounded divs are about 300px right of where they belong. I figured it was broken.

You say DD_roundies is working for you in IE8 though, very strange. I visited your company homepage, and indeed, there they are. Maybe I’ll give it a try after all.

Thanks,

Vaughn