Resolved Styling for vertical text

JuggaloBrotha

VB.NET Forum Moderator
Staff member
Joined
Jun 3, 2004
Messages
4,530
Location
Lansing, MI; USA
Programming Experience
10+
I've got a webpage where the the text is supposed to be vertical (rotated 90 degrees) instead of horizontal:
VB.NET:
<style>input { font-size:.75em} th { font-size:.75em} table {table-layout: fixed} td { font-size:.75em} .rotate { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); width: 30px; }</style>
<TABLE style="BORDER-COLLAPSE: collapse" id=ctl00_ctl00_MainWindowContentPlaceHolder_DataPageContentPlaceHolder_gvData border=0 cellSpacing=0>
<CAPTION align=top>
<DIV style="TEXT-ALIGN: left; FONT-SIZE: 1.5em">Technical Skill (1P1) </DIV></CAPTION>
<TBODY>
<TR>
<TH class="rotate" scope=col>College Code</TH>
<TH class="rotate" scope=col>CIP Code</TH>
<TH class="rotate" scope=col>Non Trad</TH>
<TH class="rotate" scope=col>Degree Level</TH>
<TH class="rotate" scope=col>High Demand Wage Skill</TH>
<TH class="rotate" scope=col>OCC Code</TH>
<TH class="rotate" scope=col>Program Name</TH>
<TH class="rotate" scope=col align=middle>Passed Assess: Non-Resident Alien Men</TH>
<TH class="rotate" scope=col align=middle>Passed Assess: Non-Resident Alien Women</TH>
<TH class="rotate" scope=col align=middle>Passed Assess: Am Indian/Alaskan Native Men</TH>
<TH class="rotate" scope=col align=middle>Passed Assess: Am Indian/Alaskan Native Women</TH>
'etc.....
In Firefox it puts the text vertically but it ignores the width. In IE it ignores the vertical but does display the width. How can I achieve both in both browsers?
 
for Firefox, Safari, Chrome etc.

VB.NET:
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);

for IE 5.5+

VB.NET:
writing-mode: tb-rl;
 
Back
Top