CODEWITHSUNDEEP
htmlcssinternet-explorerrotation
Tyharo
Tyharo

Reputation: 383

IE Vertical Text Issue

I currently have a feedback tab thats fixed to the right side of the browser and rotated 90 degrees. The tab looks fine in firefox and chrome but in IE the box rotates but not the text. Its a really simple button and will probably have a really simple solution I'm just missing.

    #feedback{
  color:#FFF;
  position:fixed;
  bottom:200px; right:-56px;
  width:140px; 
  height:35px; 
  line-height:40px;
  background:#727948;
  text-align:center;
  font-size:18px;
  border-bottom-left-radius:5px;
  border-bottom-right-radius:5px;
  -webkit-box-shadow: 0 8px 6px -6px black;
     -moz-box-shadow: 0 8px 6px -6px black;
          box-shadow: 0 8px 6px -6px black;
  opacity:0.8;
  -webkit-transform: rotate(90deg);/* Safari and Chrome */
  -moz-transform: rotate(90deg); /* Firefox */
  -ms-transform: rotate(90deg); /* ie9 */
  -o-transform: rotate(90deg); /* Opera */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /* ie8 */
  writing-mode:tb-rl; /* ie8 */ 
}

#feedback:hover{
  opacity:1;
}

https://jsfiddle.net/nhf5m4y1/

Upvotes: 2

Views: 3310

Answers (3)

Jayesh Naghera
Jayesh Naghera

Reputation: 339

For IE have -ms-writing-mode: tb-rl;

Upvotes: 1

jaunt
jaunt

Reputation: 5088

Remove the following css: writing-mode: tb-rl;. It is redundant and deprecated.

Upvotes: 1

Luiz Eduardo Simões
Luiz Eduardo Simões

Reputation: 146

writing-mode:tb-rl is deprecated, you should use writing-mode:vertical-rl instead.

Upvotes: 3

Related Questions