Many of the browsers support the ability to rotate the text I found but most of all the CSS tricks are really sucks in Opera :( even the IE6 support it *god* after i find the site http://www.inwardpath.com.au (but this sucks in IE6, I don’t support IE6 but still a some percentages of people using this “Jambavan” Browser) I found an another technique to rotate works in all major browsers


-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
width:29px;
height:80px;
position:absolute;
text-align:left;
z-index:999;
overflow: visible;
-moz-transform: rotate(90deg);
-moz-rotation-point: 0 0;
-webkit-transform: rotate(90deg);
-webkit-rotation-point: 0 0;
-o-transform: rotate(270deg);

Support IE8,7,5 FF, Opera, Chrome, Safari
this will work in all major browsers with some minor spacing issue,

and an another option is forget about the IE6 and let him die

and use this

overflow: visible;
position: absolute;
width: 38px;
-moz-transform: rotate(90deg);
-moz-rotation-point: 0 0;
-webkit-transform: rotate(90deg);
-webkit-rotation-point: 0 0;
-o-transform: rotate(90deg);
-ms-writing-mode: tb-lr;
* html writing-mode: tb-lr;

About these ads

CSS, Design Article, Xhtml

February 4, 2011

2 Comments