Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,758
    Thanks
    41
    Thanked 191 Times in 190 Posts

    text rotation IE8 IE7

    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
    Code:
    .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; 
    }
    Code:
    <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
    Code:
    .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
    Code:
    <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 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)

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #2
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,758
    Thanks
    41
    Thanked 191 Times in 190 Posts
    ideas? also as a side note, i tried replacing the text with an image to flip the image... no go

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •