2

I'm trying to create a table that will have in first column cells with rowspan. I would like this text to be rotated.

I managed to get this working on chrome, but on IE I get weird result.
This is result on Chrome: enter image description here

and this is on IE8 (IE10 works fine): enter image description here

and here is IE9 result: enter image description here

I tried with width and height properties, but it didn't help.

Below is my css for those td elements and here is jsFiddle to test it: http://jsfiddle.net/qYySC/4/

td.rotate div {
    vertical-align: middle;
    text-align: center;
    font-size: 12px;
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

How should I change my css to remove that align issue? My table is generated by server so it can have different size (number of rows in groups).

I need to get this working on IE8.

EDIT:
When I change text length in those rotated cells it start to look almost right. But if I'll have longer text can I wrap it somehow into 2 lines? And there is centering issue - text in those cells isn't centered (IE8).

Spudley
  • 166,037
  • 39
  • 233
  • 307
Misiu
  • 4,738
  • 21
  • 94
  • 198
  • Since I do not have IE8 I can't test it, but you really have to give them a width so the boxes look the same and tell for the first row that it has to be centered. – Ryan de Vries May 29 '13 at 08:15
  • @RyandeVries - I've tried that. I added text-align and vertical align to that td style, I've tried setting width and height to div or td but without any luck :( That's why I posted that question on SO. – Misiu May 29 '13 at 08:27
  • 2
    @RyandeVries: You can press F12 on your IE10 or IE9 and select browser mode: IE8 – Jawad May 29 '13 at 08:30
  • are you talking about the "First Part of my Grid" and "Second Part" text which is aligned in the middle on GG but in IE8 it shows to the left? – Jawad May 29 '13 at 08:34
  • @Jawad Yes I need text only in first column to be centered as in Google Chrome. – Misiu May 29 '13 at 08:37

2 Answers2

3

You have two problems here:

  • Firstly, in IE8 and earlier:

    IE8 is using the filter style to do rotation using ActiveX. This is a complex beast, but the main problem with it is that its default rotation point is the top-left corner of the element, rather than the center. This explains why the element is rotated into a different position than the standard CSS.

    It is possible to change it to use the center as the rotation point, but you need to use a much more complex syntax in the filter style, using the matrix filter. The maths required for even basic rotations with this is somewhat intimidating, since it's all in radians, and it's a complex matrix transformation, but it can be worked out, and there are examples on the web if you know where to look, including existing questions here on SO. Fortunately, the radian figures for a 270 degree rotation are actually relatively readable, but that's not always the case. For most cases, I would recommend using the CSS Sandpaper library (see below) rather than manually working out the filter matrix.

  • Secondly IE9:

    IE9 has a double problem. The issue here is that in IE9 they added support for the standard CSS transform style, but they also kept support for the old filter style.

    This means that in IE9 your code is actually hitting both of them and is being rotated twice using different technologies. This leads to IE getting completely confused, hence the black boxes being rendered.

    The quick solution here is to set one or other of the styles so that it is not seen by IE9. This could be using an IE-version-specific stylesheet or a CSS hack, or whatever.

So that explains what's happening and gives you some clues as to how to fix it.

But there is one other solution that you might want to use. There is a JS library called CSS Sandpaper which acts as a polyfill for the transform style; ie it adds support for the standard CSS transform to older IE versions.

So my advice for the best solution is to download the CSS Sandpaper library, include it in your site, and change the filter styles into -sand-transform:rotate(270deg);

Hope that helps.

Community
  • 1
  • 1
Spudley
  • 166,037
  • 39
  • 233
  • 307
  • Thanks for fast response, I'll check that lib (I found it some time before but I wanted to try simple css first) – Misiu May 29 '13 at 08:56
-1

There are many problems with your <table> markup and hence possibly the reason for the mess up.

  1. You are using <tbody> but no <thead> or <tfoot>.
  2. You are placing <div> inside <td>. - Is a DIV inside a TD a bad idea?
  3. You are not using any <col> elements.

It looks find on GG, FF, AS, OWB as well as IE10 & also IE9. But on IE8, the jsfiddle refuses to show up at all.

Community
  • 1
  • 1
Jawad
  • 8,352
  • 10
  • 40
  • 45
  • You can see result at: http://jsfiddle.net/qYySC/4/embedded/result/ thats the way I'm testing it :) – Misiu May 29 '13 at 08:53
  • Yes I See. I am just guessing here that your problem is because of markup and since IE8 and lower are handicapped browsers, they expect proper markup for proper display. For example if you look at your code in FF, you will see that FF automatically adds tags while IE does not. – Jawad May 29 '13 at 08:56
  • @Jawed - I'll update markup and then I'll check again. Problem is that my table is generated by asp.net gridview and that's why there is mising markup – Misiu May 29 '13 at 09:03
  • 2
    -1. None of the three points listed here are actually errors: `thead` and `tfoot` are optional, as is `col`, and there's nothing wrong with having a `div` inside a `td`. Certainly nothing that would cause the kind of problems shown here. And the reason the fiddle doesn't show up in IE8 is because jsFiddle's main editor doesn't work in IE8, not because of anything in the code being tested. – Spudley May 29 '13 at 09:11