Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Text rotation on Internet explorer [duplicate]

Tags:

html

css

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.

<a href="#" class="beta_home">BETA</a>

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);
}
like image 671
Kiran SKK Avatar asked Nov 26 '12 08:11

Kiran SKK


1 Answers

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)

like image 135
Simon Dragsbæk Avatar answered Nov 14 '22 09:11

Simon Dragsbæk