2

I have a HTML page containing some vertical text. All was fine until I viewed it in IE11 - then the vertical text wasn't vertical anymore. "Dang, I shouldn't have screwed with the designer's original, that rendered OK in IE" I thought. But it turns out that the designer's original renders OK on their server, but not on the one it needs to be hosted on. I have isolated the problem down to the following:

    #vertical_text {
    
     white-space: pre;
     display: block;
     height: 100%;
     width: 100%;
        color:blue;
     -webkit-transform: rotate(90deg);   
     -moz-transform: rotate(90deg);
     -ms-transform: rotate(90deg);
     -o-transform: rotate(90deg);
     transform: rotate(90deg);
}
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    
    <head>
    <meta charset="windows-1252" />
    
    </head>
    
    <body>
    <table><tr><td>ABC</td><td><div id="vertical_text">DEF</div></td></tr></table>
    </body>

This renders fine in FF, Chrome, Edge and when I load it as a file:/// in IE. But when I use IE to view it from our IIS server, or our Apache server, the vertical text is no longer vertical. The designer's server is LINUX-based, we are a Windows site, which suggests an encoding problem but if it is I'm stuck for what to do about it. I've tried chaning the charset metatag between windows-1252 and utf-8 but it makes no difference. I've tried the various alternatives for vertical text in IE given here

How can I draw vertical text with CSS cross-browser?

but none of them work. Any ideas?

Community
  • 1
  • 1
DJDave
  • 865
  • 1
  • 13
  • 28
  • They might be caused by IE displaying your own server in compatibility mode. – Mr Lister Jan 25 '17 at 14:46
  • Your snippet works in IE11, and SO uses a Windows server, so that can't be the problem! – Mr Lister Jan 25 '17 at 14:48
  • I have a colleague in another organisation who has reproduced the behaviour in IE11 on IIS. I've tried switching compatibility mode, no change but thanks. – DJDave Jan 25 '17 at 15:50

0 Answers0