Vertical Labels

bfoley · November 20th, 2007, 04:07 PM

I have the following code that displays 3 columns vertically :

<style>
.verticaltext
{
writing-mode: tb-rl;
filter: flipv fliph;
width: 100%
align: left;
}
</style>

<table border='1'>
<tr>
<td width='1'><div class='verticaltext'>Test-1
                      &nbsp ;
              </div></td>

<td width='1'><div class='verticaltext'>Test-12</div></td>
                     
              </div></td>

<td width='1'><div class='verticaltext'>Test-123</div></td>
                
             </div></td>

</tr>
</table>

I put the padding ( ) at the end to try and align the columns, however it doesn't seem to work. There is an extra space in the first column. For the project I am working on, I will be dynamically building these columns base on the values of a table I will be querying. Any help woould be greatly appreciated.

Thanks,

Brian

chroniclemaster1 · November 22nd, 2007, 08:13 AM

You're having a couple problems. One...

Code:

<table border='1'>
<tr>
<td width='1'><div class='verticaltext'>Test-1

              </div></td>

<td width='1'><div class='verticaltext'>Test-12</div></td>

              </div></td>

<td width='1'><div class='verticaltext'>Test-123</div></td>

             </div></td>

</tr>
</table>

Unless this was just a typo, you're closing the div and the table cells twice for the second and third columns. Start by fixing that.

Two, using the character entities is trying to adjust the columns by manipulating their contents. This is probably the easiest way to approach a cross browser solution, but as you're finding it doesn't give you very fine control over the output. You should include a padding:1em; style rule (or whatever size you want) and/or specify width:5em; if you want each column to be exactly the same width. You'll need to check each browser to make sure they display properly. But if you spend just a little time googling "CSS Box Model" you can achieve much better results and get rid of the table altogether. Using some CSS-P (CSS Positioning) on the three divs is all you really need.

-------------------------

Whatever you can do or dream you can, begin it. Boldness has genius, power and magic in it. Begin it now.
-Johann von Goethe

When Two Hearts Race... Both Win.
-Dove Chocolate Wrapper

Chroniclemaster1, Founder of www.EarthChronicle.com
A Growing History of our Planet, by our Planet, for our Planet.

bfoley · November 26th, 2007, 02:06 PM

Quote:

quote:Originally posted by chroniclemaster1
You're having a couple problems. One...

Code:

<table border='1'>
<tr>
<td width='1'><div class='verticaltext'>Test-1
                       
              </div></td>

<td width='1'><div class='verticaltext'>Test-12</div></td>
                     
              </div></td>

<td width='1'><div class='verticaltext'>Test-123</div></td>

             </div></td>

</tr>
</table>

Unless this was just a typo, you're closing the div and the table cells twice for the second and third columns. Start by fixing that.

Two, using the character entities is trying to adjust the columns by manipulating their contents. This is probably the easiest way to approach a cross browser solution, but as you're finding it doesn't give you very fine control over the output. You should include a padding:1em; style rule (or whatever size you want) and/or specify width:5em; if you want each column to be exactly the same width. You'll need to check each browser to make sure they display properly. But if you spend just a little time googling "CSS Box Model" you can achieve much better results and get rid of the table altogether. Using some CSS-P (CSS Positioning) on the three divs is all you really need.

Thanks for you help, I really appreciate it. This is what my code looks like now :

<html>
<head><title></title></head>
<style type="text/css">

</style>
<body>
<table align='center' border='1' cellspacing='0' width='250'>
<th>
  <div id="container">
        Horiz Heading</div>
</td>
<td><div id="container"><p class="verticaltext">
    Test-1</p></div></td>
<td><div id="container"><p class="verticaltext">
    Test-12</p></div></td>
<td><div id="container"><p class="verticaltext">
    Test-123</p></div></td>
<td><div id="container"><p class="verticaltext">
    Test-1234</p></div></td>
<td><div id="container"><p class="verticaltext">
    Test-12345</p></div></td>
</table>

Now, to get my "horiz heading" to line up at the bottom of the box.

Brian