How to rotate an element and correctly position it with CSS or jQuery

Question

I'm maintaining a legacy Web Forms application which currently really only runs in IE compatibility mode. We're working on getting it fixed/updated so that it can run in IE 11 without having to use compatibility mode (as well as other "modern" browsers). We have a "navigation" menu panel on the right hand side of the page and which has a sort of "label" type of element ( not an html label, I'm just calling it a label because I can't think of a better description for it right now ) with text rotated -90 (or 270) degrees. Previously, it had IE specific CSS like this:

{ 
  writing-mode: tb-rl;
  filter: flipv fliph;
}

which caused the text of the label to be rotated top to bottom and then flipped so that it read bottom to top, left to right. It ended up working pretty well for the layout at the time but IE 11 and other modern browsers don't recognize the CSS and it ends up rendering as a left to right text instead of rotated bottom to top. Here's a rough representation of what it looks like with ASCII art:

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
x ======================  / =====x
x |     Main           |  | | M |x
x |    Content         |  | | E |x
x |     Panel          |  | | N |x
x ======================  \ | U |x
x                           |   |x
x                           | P |x
x                           | A |x
x                           | N |x
x                           | E |x
x                           | L |x
x                           =====x
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

The label for the navigation menu panel is the trapezoid looking thing on the left of the menu panel.

The page was originally written using tables for layout. While I'd love to be able to completely modernize and correct the layout to not use tables, we don't really have the time to completely revamp the layout like that. Everything on the page is in one big containing table. Then, in a <tr> , each of the elements above is in its own <td> element: the main content panel, the trapezoid label, and the menu panel. Inside of the trapezoid's <td> , there's another table with three <tr> 's: one for a triangle on the top, one for the text, and one for the triangle on the bottom:

<table width="100%">
    <tbody>
        <tr>
            <td valign="center" width="100%" class="topTriangle">
                &nbsp;
            </td>
        </tr>
        <tr>
            <td height="20" valign="middle" class="navLabel">
                <img src="~/navArrow.gif"/>
                <span>Navigation Label &raquo;</span>
            </td>
        </tr>
        <tr>
            <td valign="center" width="100%" class="bottomTriangle">
                &nbsp;
            </td>
        </tr>  
    </tbody>
</table>

I'm not html/css expert and the part that I'm having trouble with is getting the text in that label rotated the correct way without using custom IE CSS. I've replaced the sub-table above with a div with text which I've shaped into a trapezoid with CSS. However, when I try using the CSS transform function, I'm able to rotate the element, but the width of the element is messing up the spacing of everything. Additionally, the menu panel is supposed to collapse when the user clicks on the label and the label and the main content panel are supposed to slide over to the right to take up the space.

I've got a jsfidde here: http://jsfiddle.net/greyseal96/vb6bou17/1/ which illustrates what I've got so far and where I'd like to go. I've tried to do a very rough reproduction of the layout of the page inside of a table. I've got three areas which I've color coded to make it easier to see what each of the areas are. I've tried having the label in its own div and rotating it with the CSS transform function but the width of the element is causing the spacing to be off. I tried making the label absolutely positioned and then using the jQuery UI .position() function to position the label in the correct spot, but when I resize the page or collapse the menu panel, the element is absolutely positioned and doesn't reposition itself.

I've been trying so many things but I just can't seem to get this so I'm hoping that somebody can help me figure out how to get this element positioned the way that we need it positioned.

Answer 1

Not exactly sure what you're trying to achieve, but it doesn't seem like you should need to do any JS based positioning. Instead, put the weird trapezoid thing inside the purple spacer element:

<div id="Spacer" class="spacer">
  <div id="NavPanel" class="container">
    <span>Some text</span>
  </div>
</div>

and rotate the span inside #NavPanel. Like this:

div#NavPanel > span {
  transform: rotate(270deg);
  transform-origin: left bottom 0;
  display: inline-block;
  width: 120px;
  position: absolute;
  bottom: 0;
}

http://jsfiddle.net/vb6bou17/4/

lastly, go see revenge on whichever developer decided on a table based layout :-)