htmlcssinternet-explorertext-rotation

Styling and js event issues on rotated div in IE?

I've rotated a div, which looks fine and functions properly in Chrome & Firefox. However in IE (v9.0.8112.16421), the style & click event only appear to be applied to the area of the div which intersects with the position of the div before it was rotated.

Notice in my sample code, when you mouse over, the cursor is only displayed near the top of the div. Also notice nothing happens when you click the bottom of the div, but the event is fired when you click near the top.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=8">
    <style>
        #myExpander
        {
            position:absolute;
            padding: 5px;
            top: 100px;
            cursor: pointer;
            border: 1px solid black;
            -webkit-transform-origin: 0 0;
            -moz-transform-origin:    0 0;
            -ms-transform-origin:     0 0;
            -webkit-transform: rotate(-90deg); 
            -moz-transform: rotate(-90deg); 
            -ms-transform: rotate(-90deg);
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $("#myExpander").click(function () {
                alert("Clicked");
            });
        });
    </script>
</head>
<body>
    <div id="myExpander">
        click me
    </div>
</body>
</html>

Can anybody shed some light on what I'm missing?

Edit (solution): Here's the final solution as per Posicoln answer below. Please notice the -X-transform-origin styles have changed as this solution displayed differently in Chrome & FF.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=8">
    <style>
        #myExpanderOuter
        {
            position:absolute;
            padding: 5px;
            top: 100px;
            height: 80px;
            width: 31px;
            margin: 0 0 0 0;
            padding: 0 0 0 0;
            cursor: pointer;
            border: 1px solid black;
        }

        #myExpanderInner
        {
            height: 30px;
            width: 79px;
            text-align: center;
        }

        .rotated270degrees
        {
            -webkit-transform-origin: 40 40;
            -moz-transform-origin:    40 40;
            -ms-transform-origin:     0 0;
            -webkit-transform: rotate(-90deg); 
            -moz-transform: rotate(-90deg); 
            -ms-transform: rotate(-90deg);
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $("#myExpanderOuter").click(function () {
                alert("Clicked");
            });
        });
    </script>
</head>
<body>
    <div id="myExpanderOuter">
        <div id="myExpanderInner" class="rotated270degrees">
            Click me
        </div>
    </div>
</body>
</html>
Solution

  • One solution could be to put the rotated div inside a normal div with the rotated dimensions and rotate that. so

    <div id="myExpander">
click me
</div>

    would turn to

    <div id="myExpanderContainer">
<div id="myExpander">
    click me
</div>
</div>

    and you could add to your CSS

    #myExpanderContainer
 {
  width: ...px; //~12px depends on browser settings, a value which could be inherited
  height: ...px; //depends on length of link, 
  cursor: pointer;
 }

    with your script as

    $(document).ready(function () {
     $("#myExpanderContainer").click(function () {
alert("Clicked");
       });
    });

    However this would need javascript to set dimensions for different length texts, if the links are changing, or if they are static it would be fine. This probably isn't the most elegant solution, but it would work