Monday, April 25, 2011

Text rotation in IE7

It was very difficult for me to rotate text in IE7. I googled a lot but couldnt find any easy solution. Here is a piece of html and css which worked for me.

div.content {
position: relative;
width: 45px;
height: 85px;
border: black 1px solid;

.txtblock {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);

-o-transform: rotate(-90deg);

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

.txtblock {
position: absolute;

<div class="content ">
<div id="Div1" class="txtblock">Awkward</div>

Inside a relative div, make an absolute div and apply the moz webkit transformation on that. The preview is on the right.