CSS text movement

I'm trying to overlay some rotated text on top of my images, but I'm having difficulty with this. Here is my code without jQuery: http://jsfiddle.net/vCbcz/4/

Problems:

• Span does not align with div after rotation
• Background transparency is not displayed in Internet Explorer, even if it is located, and I added filter: alpha(opacity = 30);to my css.

EDIT: I would like the gaps to look like http://jsfiddle.net/vCbcz/6/ , except with the text rotated. Please do not tell me to put the text in a separate container.