How to rotate a div in IE?

Posted on 2011-05-12
Last Modified: 2012-06-22

 I am trying to rotate a div in IE like so:

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

but its not working, even though thats the code format many websites say to use.  Does anyone know how to make this work??
Question by:FairyBusiness
    LVL 13

    Accepted Solution

    Well, your code looks correct, but I put it together but it reacts differently in different versions of explorer.

    Check this page:

    In IE9 the div itself rotates, but the content does not. But in compatibility mode, it all rotates. Not sure why that is.

    Here is the code.

    <!DOCTYPE html PUBLIC "-//W3C//DTD 
    XHTML 1.0 Strict//EN" 
    <style type="text/css">
    div.content {
        position: relative;
        width: 300px;
        height: 300px;
        margin: 30px;
        border-top: black 4px solid; 
        border-right: blue 4px solid; 
        border-bottom: black 4px dashed; 
        border-left: blue 4px dashed; }
    .rotate  {
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
    Image(rotation=3); }
    .txtblock {
        width: auto;
        position: absolute;
    #Div1 {
        border:red 3px solid; }
    #Div2 {
        border:purple 3px solid;  }
     <div class="content rotate">
        <div id="Div1" 
    class="txtblock">Ardvark Avacado<br 
        <div id="Div2" 
    class="txtblock">Brownies<br />Bacteria 
    Brussel Sprouts</div>

    Open in new window

    Do you have a link to a page you are trying to make work? It may take some work to make it appear correctly in all versions of IE =< 7.

    Author Comment

    yeah heres the link:

    its not working right in IE 8 or 9.  I don't have any other earlier versions.
    LVL 13

    Expert Comment

    Ummmm....I was working on it and then it 404'd.

    Did you move or rename it?

    Author Comment

    yeah sorry it should work now!
    LVL 13

    Assisted Solution

    This looks like it may help. Take a read.

    Author Closing Comment


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    What Should I Do With This Threat Intelligence?

    Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

    This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
    In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now