Digital Dog | Western Australia's Most Reliable Digital Marketing Agency

Internet Explorer 8 and Below

Support for IE9?

I'd like to remind our readers that at the time of the start of this article, Internet Explorer 9 was not in widespread use. IE may support CSS3 properties via the -ms-transform property, but they will not be covered in this article.

Notice for other Web Browsers

The code here will not work on Firefox, Safari, Chrome nor Opera browsers. Refer to our Vertical Text in Mozilla, Webkit, Opera Using CSS3 tutorial (it may have led you here) for instructions to rotate text in those browsers. The IE-specific code below should be hidden from those browsers as well. To learn how to add CSS just for IE, please visit this webpage on conditional stylesheets.

Set the stage, again!

I will re-create the container element used in the first article, as well as the stylized element to rotate. The block of code below is merely drawing the box. It does not rotate anything.


This code is for clarity only. It is not necessary to rotate text.

.rotate-container {
    height: 100px;  width: 100px;  margin: 0px auto;
    border: 1px solid #949494;  background-color: #EFEFEF;
}
.rotate-demo {
    height: 30px;  line-height: 30px;  text-align: center;
    border: 1px solid #A2D700;  background-color: #F6F6F6;
}

Our Element

two ways to write vertical text in IE6, IE7 and IE8

Tests of IE7 have been performed using IE8 Compatibility Mode. Please report any inconsistencies.

Filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=`N`);

The easiest way to have IE consistently mimic proper CSS transformation, is unfortunately this giant line of code:


The rotation value can be set to 0, 1, 2, 3 (which refer to 0°, 90°, 180°, 270° respectively).
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)

This is called a filter. Filters are Internet Explorer's way to offer advanced manipulation of elements. To use a filter, the element must "have layout" (hasLayout). This just means it must have at least one of the following attributes defined: width, height, display, position, float, zoom. So, well add the property zoom: 1 to the element .rotate-demo, because this property won't affect the element otherwise.


These will rotate our element 90° clockwise.

.rotate-demo  { /* ... */ zoom: 1 }
.rotate-90-ie {
    filter: progid:DXImageTransform.
    Microsoft.BasicImage(rotation=1)
}


These will rotate our element 270° clockwise.

.rotate-demo   { /* ... */ zoom: 1 }
.rotate-270-ie {
    filter: progid:DXImageTransform.
    Microsoft.BasicImage(rotation=3)
}

Our Element

→

Element at 90°

Our Element

→

Element at 270°

Are element rotated by 90° fits perfectly. Our element rotated by 270° fits well also, but let's pretend we wanted it to hug the right side of the box. To re-position this element, we will use position: absolute (we will need our parent element to have a position value set for this to work, so we'll use position: relative on .rotate-container).

Though not necessary, we will add the same code for our 90° element, only to keep the code for each element consistent.


Position element at the left of its parent.

.rotate-demo    { /* ... */ zoom: 1 }
.rotate-90-ie   { /* ... */ }
.rotate-90-push {
    white-space: nowrap;
    position: absolute;
    left: 0px;
}
.rotate-container { position: relative }


Position element at the right of its parent.

.rotate-demo     { /* ... */ zoom: 1 }
.rotate-270-ie   { /* ... */ }
.rotate-270-push {
    white-space: nowrap;
    position: absolute;
    left: 68px;
}
.rotate-container { position: relative }

Our Element

→

Element at 90°

Our Element

→

Element at 270°

Though both our elements are positioned to the left and right as desired, there is a new problem: Our elements no longer span the height of their container. This is because when position: absolute is set, a [div] no longer stretches to fit it's parent. The solution is just to set the width.

Notice the width is equal to its parent minus its own left and right border.


Use an explicit width to stretch the element.

.rotate-demo      { /* ... */ }
.rotate-90-ie     { /* ... */ }
.rotate-90-push   { /* ... */ }
.rotate-container { /* ... */ }
.set-dimension    { width: 98px; }


Use an explicit width to stretch the element.

.rotate-demo      { /* ... */ }
.rotate-270-ie    { /* ... */ }
.rotate-270-push  { /* ... */ }
.rotate-container { /* ... */ }
.set-dimension    { width: 98px; }

Our Element

→

Element at 90°

Our Element

→

Element at 270°

Writing-Mode and Filter: FlipV / FlipH

The property writing-mode is actually a CSS3 property that IE has long-supported. It lets you control the flow of text. The filter: flipv and fliph is also a filter, but unlike the rotation filter, this filter "flips" an element vertically or horizontally. To use a filter, the element must "have layout" (hasLayout). This just means it must have at least one of the following attributes defined: width, height, display, position, float, zoom. So, well add the property zoom: 1 to the element .rotate-demo, because this property won't affect the element otherwise.

If you are curious about Internet Explorer's hasLayout or zoom: 1, please use your favorite search engine to find out more.


Write text from top to bottom, right to left.
Flip the text vertically and horizontally.

.rotate-demo  { /* ... */ zoom: 1 }
.writing-tbrl { writing-mode: tb-rl }
.flipvh       { /* not needed */ }


Write text from top to bottom, right to left.
Flip the text vertically and horizontally.

.rotate-demo  { /* ... */ zoom: 1 }
.writing-tbrl { writing-mode: tb-rl }
.flipvh       { filter: flipv fliph }

Our Element

→

Element at 90°

Our Element

→

Element at 270°

Browsers IE6, IE7, and IE8 will all show different results, but the primary problem is that the dimensions are wrong for our elements.

This is because writing-mode changes only the flow of text. It does not affect the original width and height of an element. Rotating an element, also rotated it's height and width. But here, the width is still stretching to 100% (because the element is a [div]), and the height is still set to 30px. The solution is to swap the width and height dimensions.


Explicitly set reversed width and height dimensions.

.rotate-demo  { /* ... */ }
.writing-tbrl { /* ... */ }
.flipvh       { /* not needed */ }
.swap-wh {
    height: 98px;
    width: 30px;
}


Explicitly set reversed width and height dimensions.

.rotate-demo  { /* ... */ }
.writing-tbrl { /* ... */ }
.flipvh       { /* ... */ }
.swap-wh {
    height: 98px;
    width: 30px;
}

Our Element

→

Element at 90°

Our Element

→

Element at 270°

Again, different versions of Internet Explorer will show different results, some better than others. To make sure all versions render the same result, we simply position the element. To re-position this element, we will use position: absolute (we will need our parent element to have a position value set for this to work, so we'll use position: relative on .rotate-container).


Align element to the left of its container.

.rotate-demo  { /* ... */ }
.writing-tbrl { /* ... */ }
.flipvh       { /* not needed */ }
.swap-wh      { /* ... */ }
.wmode-pushl  {
    position: absolute;
    left: 0px;
}
.rotate-container { position: relative }


Align element to the right of its container.

.rotate-demo  { /* ... */ }
.writing-tbrl { /* ... */ }
.flipvh       { /* ... */ }
.swap-wh      { /* ... */ }
.wmode-pushr  {
    position: absolute;
    right: 0px;
}
.rotate-container { position: relative }

Our Element

→

Element at 90°

Our Element

→

Element at 270°

Reminders to maintain dimensions

Understanding an example is one thing, but learning how to troubleshoot your implementation is another matter. Below are some helpful hints to follow depending on the IE vertical-text method chosen.

Any IE Filter and/or Writing-Mode

Padding orientation is flipped/rotated with an element.
Margin orientation is NOT flipped/rotated with an element.

Writing-Mode & Filter: FlipV / FlipH

When using flipv, width will become height, and height will become width.
When using flipv, block elements (like a [div]) will not default to 100% width.

Other Troubleshooting Hints

If ever an element position seems off by one pixel, you may need to:

explicitly define a width and/or height
position the element using the position property

If an element's width, height, or position are not behaving as expected:

Make sure your IE-specific code is placed after code for CSS3-compatible browsers.

More CSS3 Text Effects

Questions About Rotated or Vertical Text In IE8?

If you have a questions about vertical text in Internet Explorer 8, let us know. Aquim Media is a Shenzhen, China web design company committed to open source scripting and the advancement knowledge in web design, so if you have a question about our tutorial on Vertical and Rotated text in IE8 let us know by leaving a comment below and we will see if we can answer it for you.

Internet Explorer 8 and Below

Support for IE9?

Notice for other Web Browsers

Set the stage, again!

two ways to write vertical text in IE6, IE7 and IE8

Filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=N);

Writing-Mode and Filter: FlipV / FlipH

Reminders to maintain dimensions

Any IE Filter and/or Writing-Mode

Writing-Mode & Filter: FlipV / FlipH

Other Troubleshooting Hints

More CSS3 Text Effects

Questions About Rotated or Vertical Text In IE8?

Let's get started!

Filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=`N`);