...

View Full Version : text rotation IE8 IE7



alykins
07-28-2011, 06:08 PM
Has anyone dealt with rotating text? I personally have never done this before and am attempting to help a buddy of mine fix his "bugs"... so originally he had


.vertical
{
writing-mode: tb-rl;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
white-space: nowrap;
display: block;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-size: 24px;
font-weight: normal;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
width:30px;
height:420px;
float:left;
color: Silver;
background-color: teal;
}




<div class="vertical">
text would go in here
</div>


which rendered ok in IE9, (didn't check IE7 or 8) bt in chrome/FF it fell apart, jumped into the middle of the page and flipped... so i changed his CSS to this


.vertical_contain
{
width:30px;
height:420px;
float:left;
color: Silver;
background-color: teal;
}


.vertical
{
writing-mode: tb-rl;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
white-space: nowrap;
display: block;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-size: 24px;
font-weight: normal;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

and the html to this


<div class="vertical_contain">
<div class="vertical">
text and stuff here
</div>
</div>


and now it renders fine across IE9, chrome, and FF... but in IE8 and IE7 it falls apart again... the text in IE8 is flipped in the middle of screen (like prior chrome/FF) and in IE7 it rotates but is beside the vertical_contain div.
Note: I do not know if it rendered "ok" on IE7 IE8 before, i was fixing the chrome/FF issue so i didn't check.
Any ideas would be great. according to MSDN (http://msdn.microsoft.com/en-us/library/ms532918(v=vs.85).aspx) the flow is object.filter.item() with object being image transform, filter being microsoft, and item being basicimage... now following the link of MSDN for basicimage it seems as though this property should only be used for images, is that correct? if so i guess the solution would be to flip images (ie make the text an image and flip it)

alykins
07-29-2011, 11:45 PM
ideas? also as a side note, i tried replacing the text with an image to flip the image... no go :(



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum