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.
<style>
div.content {
position: relative;
float:left;
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;
font-weight:bold;
}
</style>
<div class="content ">
<div id="Div1" class="txtblock">Awkward</div>
</div>
Inside a relative div, make an absolute div and apply the moz webkit transformation on that. The preview is on the right.
Labels:
css,
IE,
Internet Explorer,
Rotation
Subscribe to:
Post Comments (Atom)
Thanks
ReplyDeletewww.chinnikk.com
good article.
ReplyDeletekeep up the good work
ReplyDeleteThanks for sharing the valuable information
ReplyDeletevery informaive help me alot
ReplyDelete