Rotating 90 Degrees in CSS in IE8 and Lower

Rotating 90 degrees in CSS in IE8 and lower

You want to use filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

CSS

.horizontal {
    display: block;
    width: 300px;
    height: 100px;/*height*/
    background: #FF0000;
    margin: auto;
    margin-top: 110px;
    text-align: center;
    border: 5px solid #000000;

    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    transform: rotate(-90deg);
}

More information on this

Rotate a text 90 degree in IE8 doesnt work

you have to use filter property for supporting IE8. Here is the Demo.

you can change the degree by by defining the integer value (0,1,2,3)

div
{
  width:150px;
  height:150px;
  -ms-transform:rotate(9deg); /* IE 9 */
  -moz-transform:rotate(90deg); /* Firefox */
  -webkit-transform:rotate(90deg); /* Safari and Chrome */
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /*FOR IE8*/
}

Rotate text in IE, without it getting ugly

The RenderEngine of IE is awful... I would try to work with background images. Maybe a Font Replacement like Cufon would do a better Job. Cufon generates Images of your Text. Works good in IE as far as i know.

CSS rotation in IE not displaying properly

OK, I figured it out after a while.

Basically, I created the menu element structure like that:

<li data-hover="[Element title]">
    <a href="#">[Element title]</a>
</li>

And the CSS code looks like this (please note that I'm using SASS + Compass and I skipped attributes unimportant in this case like font & bg color, etc.):

> li {
    position: relative;
    display: inline-block;
    width: remCalc(160px);
    height: remCalc(40px);
    @include perspective( remCalc(1000px) );
    &::before {
        width: remCalc(160px);
        height: remCalc(40px);
        display: inline-block;
        @include single-transition(transform, 300ms);
        position: absolute;
        top: 0;
        left: 0;
        content: attr(data-hover);
        @include transform-origin(50%, 0);
    }
    a {
        width: remCalc(160px);
        height: remCalc(40px);
        display: inline-block;
        @include single-transition(transform, 300ms);
        position: absolute;
        top: 22px;
        left: 0;
        @include rotateX(-90deg);
        @include transform-origin(0, 20px, 0);
    }
    &:hover::before,
    &:focus::before  {
        @include create-transform(false, false, false, false, 90deg, false, false, false, false, -22px);
    }
    &:hover a,
    &:focus a {
        @include create-transform(false, false, false, false, 0, false, false, false, false, -22px);
    }

That way when the element rotates, the A tag becomes visible so the user can click it.

Works perfectly in Firefox, Chrome and IE. Has some problems in Safari - on hover, the first face instead of rotating, disappears. However the second face rotates properly so except for weird visual "glitch", the menu is usable.

Rotate text to vertical in IE not working

In order to Rotate in those older browsers, you'll have to use Microsoft's proprietary filters:

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

Replace Value with an integer, 0-4.

0 = 0 degrees
1 = 90 degrees
2 = 180 degrees
3 = 270 degrees
4 = 360 degrees

I do not believe you can do anything other than 90 degree increments, and I believe you may only have one filter per CSS rule. Also, this is of course non-standard and won't validate, if that's an issue.

how to rotate text left 90 degree and cell size is adjusted according to text in html

You can do that by applying your rotate CSS to an inner element and then adjusting the height of the element to match its width since the element was rotated to fit it into the <td>.

Also make sure you change your id #rotate to a class since you have multiple.

$(document).ready(function() {  $('.rotate').css('height', $('.rotate').width());});

td {  border-collapse: collapse;  border: 1px black solid;}tr:nth-of-type(5) td:nth-of-type(1) {  visibility: hidden;}.rotate {  /* FF3.5+ */  -moz-transform: rotate(-90.0deg);  /* Opera 10.5 */  -o-transform: rotate(-90.0deg);  /* Saf3.1+, Chrome */  -webkit-transform: rotate(-90.0deg);  /* IE6,IE7 */  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE8 */  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";  /* Standard */  transform: rotate(-90.0deg);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table cellpadding="0" cellspacing="0" align="center">  <tr>    <td>      <div class='rotate'>10kg</div>    </td>    <td>B</td>    <td>C</td>    <td>D</td>    <td>E</td>  </tr>  <tr>    <td>      <div class='rotate'>20kg</div>    </td>    <td>G</td>    <td>H</td>    <td>I</td>    <td>J</td>  </tr>  <tr>    <td>      <div class='rotate'>30kg</div>    </td>    <td>L</td>    <td>M</td>    <td>N</td>    <td>O</td>  </tr>

</table>

CSS navigation menu won't rotate properly in IE8

You can't use transform in IE8. You can find out more: http://caniuse.com/#search=transform.
If you want rotate such as your site. You can use static images and css sprites for IE8. This is demo, I fix for IE 8 solution rotate.

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Solution rotate in IE8</title>
    <link rel="stylesheet" href="css/stylesheet.css">
    <!--[if gte IE 9]>
        <link rel="stylesheet" type="text/css" href="css/ie.css" />
    <![endif]-->
</head>
<body>
    <div class="container">
        <div class="nav-bar">
            <ul class="navigation">
                <li><a href="#" class="home">Home</a></li>
                <li><a href="#" class="about">About Us</a></li>
                <li><a href="#" class="portfolio">Portfolio</a></li>
                <li><a href="#" class="process">Our Process</a></li>
                <li><a href="#" class="client">Client List</a></li>
                <li><a href="#" class="consultation">Consultation</a></li>
                <li><a href="#" class="contact">Contact Us</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

CSS

- stylesheet.css: Use -webkit-transform: ratate(90deg)

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.container {
  width: 900px;
  margin-left: auto;
  margin-right: auto; }

.nav-bar {
  width: 100%;
  position: relative; }
  .nav-bar:before, .nav-bar:after {
    content: "";
    display: table; }
  .nav-bar:after {
    clear: both; }
  .nav-bar {
    *zoom: 1; }

.navigation {
  background-color: #f2f2f2;
  padding: 10px;
  width: 100%;
  position: absolute;
  left: 40px;
  top: 0;
  -webkit-transform: rotate(90deg);
  -webkit-transform-origin: 0 0; }
  .navigation li {
    display: inline-block; }
  .navigation a {
    color: #825a13;
    font-weight: 700;
    padding: 10px;
    text-decoration: none;
    text-transform: uppercase; }

- ie.css: Fix when you use IE8 (use images and css sprites)

.navigation {
  background-color: transparent;
  width: 40px; }
  .navigation li {
    display: block;
    float: left; }
  .navigation a {
    background: url(../img/nav.png) no-repeat;
    display: block;
    text-indent: -9999px;
    width: 40px;
    height: 118px; }
    .navigation a.home {
      background-position: 0 0;
      height: 75px; }
    .navigation a.about {
      background-position: 0 -86px;
      height: 90px; }
    .navigation a.portfolio {
      background-position: 0 -187px;
      height: 101px; }
    .navigation a.process {
      background-position: 0 -299px; }
    .navigation a.client {
      background-position: 0 -435px; }
    .navigation a.consultation {
      background-position: 0 -571px; }
    .navigation a.contact {
      background-position: 0 -706px; }

Images:

I test working fine in IE8. Maybe this isn't best solution but I hope it can help you use in your site.

---

Related Topics