CSS text rotation

Question

I am trying to to overlay some rotated text over my images but I am having some difficulty with it. Here is my code without all the jQuery: http://jsfiddle.net/vCbcz/4/

Issues:

• The span does not align with the div after the rotation
• The background transparency isn't showing up in Internet Explorer even though the span is positioned and I have added filter: alpha(opacity = 30); to my css.

EDIT: I would like the spans to look like http://jsfiddle.net/vCbcz/6/ except with rotated text. Please don't tell me to put the text in a seperate container.

Answer 1

Setting left:-25px; on the spans fixes it for me in Firefox. See here.

Edit
With regards to IE, the reason your alpha filter isn't being applied is because your second filter: is overwriting your first. If you want them to both be applied, you put them in the same filter: separated by a space like so:
filter: alpha(opacity = 30) progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

I noticed that in IE the left:-25px; makes it worse so perhaps you'll have to do some conditional comments or CSS hacks to get around it. (Icky!)

Just a warning, this doesn't work in Opera at all.

Edit 2
Here's my changes with fixing IE's bugs and supporting Opera and possibly other browsers if they support the CSS3 transform property.