Vertical text in IE within a table cell

Question

I'm trying to rotate some text cross browser within a thin table cell that spans a few rows. I want it to be a nice compact summary of the rows, which is why it is thin and rotated -90 degrees. The tips described here:

Vertical (rotated) text in HTML table

work like a charm except in, surprise surprise, IE, where the text is rotated, but the text is clipped to the width of the cell.

Here are the relevant styles:

#schedmenu td.label {
/*width:22px;*/
/*width:100%*/
vertical-align:middle;
font-size:12.5px;
}


#schedmenu td.label span {
display:block;
-moz-transform: rotate(-90deg);  /* FF3.5+ */
  -o-transform: rotate(-90deg);  /* Opera 10.5 */
 -webkit-transform: rotate(-90deg);  /* Saf3.1+, Chrome */
        filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
                M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',
                M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17)"; /* IE8 */
          zoom: 1;

color:white;
position:relative;
top:12px;
}

and the html:

<td class="label" rowspan="3"><span>Recent</span></td> 

You will be my hero if you can get me past this one :)

Solution 1

I created 2 CSS, one for IE and one for the rest of the browsers. For IE I used:

style="color:black; line-height:20px; writing-mode: tb-rl; filter: flipH() flipV();"

Solution 2

If I were you, I would have open InkScape and created three different image.

or as you already have printscreened images, just crop it. and put them as background image.

I frequently do some extremely beautiful css design which works in chrome and firefox and then print screen it , crop it and replace the actual design with images and it all works in IE.

or span: dispaly:block and height:100%; ??

Solution 3

I found that whilst it seemed to work, it cut off like you had in your original post. After playing with a few options, I added "table-layout: fixed;" to the table's css. That way I could force all my column widths to their required and the entire span would show up.

Only tested in IE8 at the moment, but I believe it should work cross-browser, since the only thing I really added was the table-layout, which I believe is fully accepted? Setting it to fixed makes all columns equal (ignoring content) except where widths have been set, so you need to set all your widths where required.

Just a thought anyway.

My related CSS:

table.comp{
    table-layout: fixed;
}
th.vertth {
    vertical-align:middle;
    height: 125px;
    width: 20px;
    overflow: hidden;
}
th.vertth span {
    -moz-transform: rotate(-90deg);  /* FF3.5+ */
    -o-transform: rotate(-90deg);  /* Opera 10.5 */
    -webkit-transform: rotate(-90deg);  /* Saf3.1+, Chrome */
    filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17)"; /* IE8 */
    zoom: 1;
    position:relative;
    display:block;
    margin: 0;
    width: 125px;
}

Note that the width of the span should be the same as the height of the cell to prevent it from spilling out. If you have larger content to go in the span, consider resizing your column height or width.

Solution 4

Not the most elegant way, but it works under IE8 (didn't tried under older versions):

<td class="label" rowspan="3"><span>Recent<br/>&nbsp;</span></td>  

View more solutions

Comments

[Karl Rosaen]

yeah, I'll try resort to the image background if I can't find a way to make it work with text. but I'm so close!

[Karl Rosaen]

just deployed a demo if you want to see the full html / css (see my comment on the question for the link)

[iamgopal]

i can see you have tried real hard , any luck with height:100%; ?

[Karl Rosaen]

for what it's worth, I ultimately just used images. not a real programming solution, but perhaps the fact that this wasn't possible cross browser is information in itself.