Text rotation on Internet explorer [duplicate] - html

Question

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
CSS rotate property in IE
Can any one help here to rotate the text on IE- 8, IE -7 versions.
it is working on Chome, firefox, IE-9, but doesn`t have any results on IE-8, IE- 7.
BETA
css
a.beta_home{
position: absolute;
text-decoration: none;
top: 12px;
right:0;
margin-left: 0px;
font-size: 9px;
color:red;
border: 1px solid #fff;
display: block;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Answer 1

i wouldn't pref to do it in any browser cause they all render it very different.. but you could do it with javascript
Documentation
http://code.google.com/p/jquery-rotate/
Commands
$('#theimage').rotateRight(45);
$('#theimage').rotateLeft();
This would render it the same in IE 9, chrome, firefox, opera and safari cause its using a canvas object instead of turning the text by browser rendering
It will use the old codings for ie8, 7 & 6 Generate it here
/* IE8+ - must be on one line, unfortunately */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=-0.1763269807084645, M21=0, M22=1, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix( M11=1, M12=-0.1763269807084645, M21=0, M22=1, SizingMethod='auto expand');
Working ex
IE 7&8 tested
Fiddle (margins need to be different in chrome and other browsers cant say why but it does)
If you dont know how to differ css trough out the different browsers see this link
My opinion
Beside all this i would recommend you make it as a picture (already rotated) using photoshop or if your dont have access to such programs use free (GIMP)

Answer 2

Try to use this online service:
http://www.useragentman.com/IETransformsTranslator/
It transform css3 rule
rotate(-90deg)
applied on div with WIDTH: 220px; HEIGHT: 70px;
to IE specific rules:
/*
* The following two rules are for IE only and
* should be wrapped in conditional comments.
* The -ms-filter rule should be on one line
* and always *before* the filter rule if
* used in the same rule.
*/
#transformedObject {
/* IE8+ - must be on one line, unfortunately */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=3.061515884555943e-16, M12=1, M21=-1, M22=3.061515884555943e-16, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=3.061515884555943e-16,
M12=1,
M21=-1,
M22=3.061515884555943e-16,
SizingMethod='auto expand');
/*
* To make the transform-origin be the middle of
* the object. Note: These numbers
* are approximations. For more accurate results,
* use Internet Explorer with this tool.
*/
margin-left: 71px;
margin-top: -78px;
}

Answer 3

/* IE8+ - must be on one line, unfortunately */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=-0.1763269807084645, M21=0, M22=1, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix( M11=1, M12=-0.1763269807084645, M21=0, M22=1, SizingMethod='auto expand');
/* For IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);