CSS - Rotate Words 90 Degrees With Css - Possible?

I have a series of horizontal radio buttons which are generated dynamically from a database record set. There are 3 sets on 3 different rows. The problem is the labels for the buttons are not the same length so when the page is generated the radio buttons do not line up neatly, vertically.

Is there a way of getting a CSS style to put a tab at the end of a word so that the next radio button lines up.

Or alternatively is there an even easier way to do this.

The obvious solution is to nest a two column table with fixed length column and have this repeat, rather than a single row. But there may be a more elegant method.

I've tried every thing possible to make the words spread out in Firefox (I don't know about IE6 or 7): Display: block; text-align: left; left: 0px... It doesn't work.
PHP Code:
<ul>
<li style="">
        <a href="http://www.....com/Merchant2/merchant.mvc" onmouseover="<?php //changeImages('index_10', 'images/index_10-over.gif'); return true;?>" onmouseout="<?php //changeImages('index_10', 'images/index_10.gif'); return true;?>"><span style="position: relative; left: 0px; text-align: left; background-color: #eeeeee; border: 1px solid #000000; width: 30px; height: 10px; display: block; padding: 10px 100px 10px 100px; font-family: Verdana, Arial, Times New Roman; text-decoration: none; font-weight: bold; font-size: 16px; color: #000000;">Online Store<?php //<img NAME="index_10" SRC="images/index_10.gif" WIDTH=167 HEIGHT=33 BORDER=0 ALT="Online Store">?></span>
        </a>
    </li>
</ul> 

I am trying to write a Header line for a <div> like this:

This -tab- is \t a \\t tabular........line........of.........text + "\t" + used &nbsp; &nbsp; &nbsp; &nbsp; as a header.

The good book says you can use \t but that doesn't work. ( I should say I can't make it work)

I don't want to use a gazillion &nbsp; tags.

Thanks for your help in advance.

R P

Hi guys,
I'm working on a website here : >spacescientific.com
when mouse pointer go on links in website, an yellow (ajax/java>I'm not sure!) box opening and show intro of article. now I want to limit number of words (for example to 20 words) on this window .
to explain what I mean: >spacescientific.com/spacescientific.jpg
how can I do that. any idea???
Can anyone help me about this pleaseee. this is really really important to me

thank you

Hi

I'm in the middle of creating a web forum, and I've run into a little 'snafu'. Forum replys have a fixed width design so when words are used that are greater than width of the design, 500px, the word actually expands the design. All I want is for the word to stop at 500px and begin on a newline.

A picture can always explain it better:


Code:

		<table class='forum_block'>
		<thead>
		<th>mikeymike</th>

		</thead>
		<tbody>
		<tr>
		<td class='post_text' colspan='2'>gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg  ggggggggg</td>
		</tr>
		<tr>
		<td class='post_date' colspan='2'>1280199359</td>
		</tr>

		</tbody>
		<tfoot>
		<tr>
		<td colspan='2'><a href='?edit=51'><button><img src='/_images/icons/comment_edit.png' />Edit</button></a>
			<a href='?post_form=17'><button><img src='/_images/icons/comment.png' />Post reply</button></a>
			<a href='?post_form=17,quote=51'><button><img src='/_images/icons/comment_add.png' />Quote</button></a>
			
		</td>			
		</tr>

		</tfoot>
		</table>

Code:

.forum_block {
	font-family: verdana, Arial, Helvetica, sans-serif;
	width: 99%;
	margin: 10px auto;
}
.forum_block th {
	background: #b7cade;
	font-weight: bold;
	color: #fffefe;
	padding: 0.5em;
}
.forum_block td {
	background: #efeeee;
	border: solid 2px #efeeee;
	padding: 0.5em;
}
.forum_block td textarea, .forum_block td input {
	background: #efeeee;
	width: 510px;
}
.forum_block tfoot td {
	background: #b7cade;
	border: none;
	color: #fffefe;
	font-weight: bold;
	padding: 0.5em;
}
.forum_block .post_text {
	font-family: Georgia, "Times New Roman", Times, serif;
}
.forum_block .post_date {
	font-size: 0.7em;
	text-align: right;
	font-style: italic;
}

I have some code like this:

Code:

    <a href="">My Link is Long</a>
    <a href="">My Link is Longer Than Yours</a>

The second link is coming at the end of a line and is breaking to the next line in the middle. Is there a way to force the entire <a> tag to go to the next line if it wont all fit on the current line?

something like

Code:

a {
     behavior-when-getting-split-lines: do-not-split;
}

Hi all,

I've created a template in CSS and divs, but when someone puts a word like this_is_a_template - with no spaces in it, it breaks the left nav.

Is there any way of making sure words break once they get to the width of the leftnav, even when they don't have spaces in them?

Cheers.

Here's the deal. I want to have one generic button image that I can use for all buttons. Therefore, I don't want to have words on the image but instead want to write them in afterward. Normally, you could just do something like

Code:

<input type="image" src="..."

and things are fine. However, like I said, I don't want to do that because this forces me to create an image with the words already on them. I want a black button that I can write the words on, but want it to still behave like a submit button. Which means, once I type in my username and password, I just want to be able to hit enter (and not be forced to click on the button) and submit the form. Am I asking for too much?