IE seems to be trasfoming after rotating text wirh css filter

The issue is that when I try to rotate text with IE, the text seems to the left

The CSS that I'm using to rotate is here (I also have an opacity filter):

		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		-moz-opacity: 0.3;
		-khtml-opacity: 0.3;
		/* for ie */
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3), progid: alpha(opacity=30);
		opacity: .3;

Code (markup):

An example of the rotated text can be seen here (on the sliding banners):
rightsfortenants.co.uk

The view in IE is completely different to the view in other browsers. I've tried all sort (floating to the left, changing the widths / wrapping the rotated text in divs and transforming them) ... but to no avail.

The only real solution that I can see it to write a completely different top/left off-set just for IE using an IE hack
eg -left: -right:

Does anyone know what the issue is? Does IE rotate differently than other browsers, should I be using something else?

 

ah well

I ended up using

to get around this issue, I've still no idea why IE rotates so differently

 

I haven't tested your code, but IE has very poor support for these types of transformations, if any at all. So I wouldn't be surprised if you are having trouble. It depends on what version of IE you are using as well. Here is some explantion:

Scroll down to "Element Rotation":
http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/

 

cheers, you know, I ended up writting a different css hack for each version of IE! Every single one of them acts differnetly than other browsers ... esh!