html - IE8 rotate filter rotates div but not text -


i'm trying rotate text on browsers incl. ie8+. have set transforms other browsers, when comes ie8, can box rotate, text not rotate it.

see here: https://dl.dropboxusercontent.com/u/106547/rotate/rotate.html

the markup:

<div id='container' class='container'> <p class='rotated'> view has been loaded </p> text </div> 

the style: regular -

.rotated{         display: block;         position: relative;          /* safari */         -webkit-transform: rotate(-90deg);          /* firefox */         -moz-transform: rotate(-90deg);          /* ie */         -ms-transform: rotate(-90deg);          /* opera */         -o-transform: rotate(-90deg);          transform: rotate(-90deg);        } 

and ie8 conditional

<!--[if lt ie 9]> <style type="text/css"> .rotated, .container{     zoom:1;     -ms-filter: "progid:dximagetransform.microsoft.basicimage(rotation=3)";     filter: progid:dximagetransform.microsoft.basicimage(rotation=3); } </style> <![endif]--> 

as can see here, div/paragraph tags rotated, text staying horizontal: http://f.cl.ly/items/1h3w2i1a2m3e3b1z1b0a/rotate.jpg

i've been poking away @ while , can't seem figure out why isn't rotating. i'm not worried rotation position @ moment, i'm trying rotate. ideas wrong? thanks.

for older ie, should after writing-mode rotate entire box :)

http://msdn.microsoft.com/en-us/library/ie/ms531187%28v=vs.85%29.aspx


Comments

Popular posts from this blog

How to mention the localhost in android -

php - Calling a template part from a post -

c# - String.format() DateTime With Arabic culture -