Text rotate background issue - IE8 and IE7

Question

I have a carousel that requires titles be rotated by 270 degrees, and it looks lovely but on IE8 & IE7, there is a horrible black outline in the text.

From Firefox- IE9, Chrome and opera are all identical ->

From IE8, IE7 shows the same. ->

I have tried the css method filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1); but this screws up IE9, even with -ms-transform in there to counter it.

I have also-

• Included Cufon to try to create an image canvas of the text, then rotate that using css filters/transforms - same result.
• Used jQuery Rotate plugin from jQuery Rotate

If anyone has any ideas on how to overcome this, I would greatly appreciate it. Thanks, Dan

Answer 1

Have a look at Raphael http://raphaeljs.com/ I've used this in some projects and have had good experiences.