Thursday, 27 January 2011

Curvy Corners in IE

Have been fighting with the lack of CSS3 compatibility in IE8 ... and not sure what will be there in IE9. Just like 'pure' curved DIV corners rather than faking it with background images.

Opera, Firefox, and the delightful Epiphany all do them natively, but IE, grrrrrr ...

Several options tried, and my results are:
  • curvycorners (js) : initially promising but event redraw costly and occasional errors popping up
  • border-radius : uses .htc/vml but only handles one configuration for each corner, and seems to not handle re-draws properly
  • DD-roundies : similar but more complete version of above [not tried]
  • PIE/CSS3 : again, an htc/vml solution and appears to work beautifully, adding most all of CSS3's commonly used features to IE
So, my conclusion is to go for PIE. It lets the other browsers get on with it, whilst supporting CSS3 natively from within your CSS - so less intrusive than most other options. I now have Firefox and IE displaying almost identically without any fudged HTML or CSS. Yay.

Final tip for XP Firefox users - switch on ClearType if you have an LCD display. Enables the sub-pixel smoothing across Windows that IE uses. Be rid of those spindly letters!

No comments: