Rotate Span text using jquery

Question

i want to rotate span text using jquery.

<DIV id=container_vml_YAxisTitle_1>
<SPAN style="FONT-SIZE: 14px; FONT-FAMILY: Segoe UI; POSITION: absolute; ZOOM: 1; COLOR: #707070; LEFT: -64px; FILTER: alpha(opacity=100); TOP: 234px; VISIBILITY: visible">Sales Amount in millions(USD)
</SPAN>
</DIV>

i referred the below link for rotating the text but it's not working as expected.

CSS rotate text - complicated

tried like below

<SPAN style="FONT-SIZE: 14px; -ms-transform:rotate(-90deg);   FONT-FAMILY: Segoe UI; POSITION: absolute; ZOOM: 1; COLOR: #707070; LEFT: -64px;  TOP: 234px; VISIBILITY: visible">Sales Amount in millions(USD)
</SPAN>

but not working in IE7 and IE8 browser working fine in other browsers.

i am using IE7 and IE8 browser. using jquery 1.7.1.

Thanks,

Siva

possible duplicate of Does CSS transform property works on block and inline-block level elements only? — Mr. Alien
– Mr. Alien, Commented Sep 5, 2013 at 10:09

Praveen · Accepted Answer · 2013-09-05 10:05:41Z

2

1) You have to use : not =

-ms-transform:rotate(-90deg)

2) You should have given it under style attribute

<span  style="-ms-transform:rotate(-90deg); position: absolute">SPAN</span>

3) span doesn't have layout, so you have to add position: absolute or display: block to span tag

Check this Fiddle1 and here is your fiddle2

Updates: For older version of IE

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

edited Sep 5, 2013 at 10:05

answered Sep 5, 2013 at 9:13

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SivaRajini Over a year ago

thanks for your update.but its not working as expected in IE7 browse. working fine in other browsers.

Praveen Over a year ago

@SivaRajini You have to use filter to support older version of IEs check this msdn.microsoft.com/en-us/library/ms532847%28v=vs.85%29.aspx

Krzysiek · Accepted Answer · 2013-09-05 09:13:39Z

0

This is css code - you should add this to <style></style> tag or style attribute:

<span style="-ms-transform:rotate(-90deg)"> </span>

answered Sep 5, 2013 at 9:13

Krzysiek

2,51419 silver badges21 bronze badges

1 Comment

SivaRajini Over a year ago

thanks for your update.but its not working as expected in IE7 browse. working fine in other browsers. –

Collectives™ on Stack Overflow

Rotate Span text using jquery

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related