IE7/8 css issue with rotating div content

Question

I have a div that contains a table. On the click of a button in the table, I want to rotate the div and its contents by 90 degrees and hide everything but the header offscreen. Here is an example of this working in IE10:

However, this does not work in IE7 and IE8. Inspecting the elements via the developer toolbar, it seems that the table is not rotating. The div seems to be rotating, because the outline appears where it should be... However, it's like the actual UI isn't updated to reflect this rotation?

Any ideas what might be happening and how to fix this?

Some relevant css for IE7:

#my-div {
    width: auto;
    float: left;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    max-width: 200px;
    min-height: 35px;
    height: 100%;
    display: block;
}

#my-div.hide
{
    overflow: hidden;
    height: 35px;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

#my-div table
{
    width: auto;
}

And the html is nothing special. It's laid out like this:

<div id="my-div">
    <table>
        <thead>
            <tr>
                <th>
                    <button>X</button> 
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
            </tr> 
            ...
        </tbody>
    </table>
</div>

Answer 1

The issue was that I was using developer tools to switch between browsers. Apparently, this changes some browser security settings. The way this would actually look in IE7/IE8 is not accurately represented by using developer tools in IE10.

I downloaded IETester, and the content is not having this issue anymore. False alarm.

Answer 2

Your code should work for IE7. If you are unable to get it work there is a JavaScript Library called CSS Sandpaper that allows you to use CSS code for rotations and works for older versions of IE.

Edit: I was playing with the example code from the MS Developer Network and noticed that their example works fine on all versions of IE. If I change the position: to relative instead of absolute the rotation stops working in IE7. You might want to test that on your end since you are using relative positioning on your element.

If that does not help you a full sample of your HTML code or a fiddle would be helpful so that the community could better help you.

Answer 3

on associated click event of the button use jquery to rotate the div and all its children

function changeOrientation(){
$('#div').attr('webkit-transform', 'rotate(90deg)'); 
//Loop inside all elements in the div and add the same to all the elemnt

}

javascript code

function changeOrientation(){
    document.getElementById('#div').style.webkit-transform = 'rotate(90deg)'; 
    //Loop inside all elements in the div and add the same to all the elemnt
for(var count = 0; count < document.getElementById('#div').children.length; count++){
document.getElementById('#div').children[count].style.webkit-transform = 'rotate(90deg)'; 
}
}

give a try and let me know if it works.