0

I am working on an example where i want to write text vertically at 90 deg and 270deg.

Example at JSFiddlle

It seems to be working in FF but doesn't show up in IE at all.

I tried to change certain properties with no luck.

I would appreciate if someone can help me resolve this so that it works across all browsers.

Regards

Learning
  • 19,469
  • 39
  • 180
  • 373

4 Answers4

1

IE doesn't support this along with most other CSS3 functions.

Although you could try this guys solution:

http://scottgale.com/blog/css-vertical-text/2010/03/01/

Billy Moat
  • 20,792
  • 7
  • 45
  • 37
1

because its using webkit, moz and o css3 properties to rotate it. IE supports none of these css attributes

Simon McLoughlin
  • 8,293
  • 5
  • 32
  • 56
  • 1
    detect IE and have an alert pop up and tell users to upgrade to a modern browser that works ?, failing that check this out : http://www.aquim.com/web-article-226.html – Simon McLoughlin Jul 12 '12 at 10:07
1

It's very strange but when I remove Helvetica from your CSS it all seems to work fine. Are you sure the text displays when you remove the rotation?

Also, the height: -150px might be causing a problem. Try using margins instead.

You might want to add

-ms-transform: rotate(270deg);

for modern IE.

The demo from this article works fine in IE9 for me: css-tricks.com/sideways-headers

This one is good too: css-tricks.com/snippets/css/text-rotation

jfrej
  • 4,548
  • 29
  • 36
0

I think the way i have done along with Jquery is much better and help to get around the browser issue as i faced in other example

Check out http://jsfiddle.net/RwEme/1865/

I think this is best suited for my example & works well in IE without any issue with font also. I am write text in div and rotating it with jQuery plug in.

Has issues with IE 8 & below

Learning
  • 19,469
  • 39
  • 180
  • 373