Text isn't filling cell

Not sure if it's an html or css fix

[akmac]

<disclaimer> I'm clueless </disclaimer>

As a veteran wysiwyg user, I'm often baffled by the seeming black art of coding. Currently, I've got a two column table with a couple rows spanned. I'm trying to get text to fill one of the spanned rows, but it seems that there's always 50-60 pixels of empty space on one side. Here's the html and css: (problem line in red)

.descriptionText { font-size: 10pt; text-align: right }

<table width="100%" border="0" cellpadding="0" cellspacing="0" class="text15Grey">
<tr>
<td><?=$profile["name"]?></td>
<td class="text16Red"><?=$profile["rating"]?></td>
</tr>
<tr>
<td>Self Rating</td>
<td class="text16Red"><?=$profile["self_rating"]?></td>
</tr>
<tr>
<td>Votes</td>
<td class="text16Red"><?=$profile["votes"]?></td>
</tr>
<tr>
<td>Views</td>
<td class="text16Red"><?=$profile["views"]?></td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
[red]<td colspan="2" class="descriptionText" align="right" bgcolor="#f5f5f5"><?=$profile["description"]?></td>[/red]
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td colspan="2" align="center">
<a href="#" onClick="window.open('send_mail.php', 'tinyWindow', 'toolbar=no,width=650,height=650');">yaddayadda</a>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<a href="#" onClick="window.open('send_mail.php', 'tinyWindow', 'toolbar=no,width=650,height=650');">yaddayadda</a>
</td>
</tr>
</table>

I'd appreciate any tips that would help me get the text to fill the box as opposed to "breaking" prematurely. Let me know if you need any more information.

[cmarshall]

This appears to be doing exactly what you want it to do. You do realize that you have that row aligned right, don't you?

What, exactly is the problem. I guess I don't understand.

[akmac]

Yes, I've aligned it right and left-using both html and css just to be sure that it goes all the way to the edge on both sides. The problem, is that the text breaks at about 180 pixels in a cell that is 244 pixels wide. If I align it left, there is a bunch of empty space on the right. If I align it right, there is a bunch of empty space on the left.

[edited by: SuzyUK at 9:19 pm (utc) on Feb. 2, 2007]
[edit reason] no personal details pls.. [/edit]

[sldesigns]

Well, you can't force justify by using align:left and align:right in different places. Align:right is the closest declaration, so align:left is overridden.
It sounds like maybe there is some padding or margins specified elsewhere that this cell is picking up. Specify no padding or margin in the class. Or take out other references to padding or margin and see if it changes.

[appi2]

You align right twice.
Once in your css and once in the inline style.
Also your missing the ; off the css style.

.descriptionText { font-size: 10pt; text-align:right; }

[penders]

Also your missing the ; off the css style.

You don't strictly need the ';' after the last style property in a style declaration (before the closing '}') - although it is good practise to stick it in to avoid problems later, when you add more style properties.

It may sound simple, but... you could try debugging with

<table border="1"...

to make sure the space isn't in an adjoining table cell. Hhhhmmm... although you should have any adjoining table cells in your case!

[akmac]

Tried specifying no padding in the class and that didn't fix it. Adding the borders didn't reveal anything either... Though it looks like the text may not be spanning two columns like it should. It appears to be breaking where the column a few cells above it ends...?

[appi2]

If I put the code you provided into a page and replace <?=$profile["description"]?> with some text. There is no problem with text wrapping or filling the cell.

Are you sure <?=$profile["description"]?> isn't formatted some way.

[akmac]

There may be-but I'm not sure how I would check that? This is a site made by someone else (for me) that I'm just trying to get to look right. I think you may be right though, because I viewed the page without css and there was still a significant gap. I want the text to be justified.

Thanks for your help!

AHA! What the heck is this:

$profile["description"]= wordwrap($profile["description"], 30, "<br>", 1);

Looks suspicious...

Ok, it brakes after 30 characters-easy enough to change-but is anyone aware of a solution that would justify the text, so one edge isn't ragged?

[penders]

$profile["description"]= wordwrap($profile["description"], 30, "<br>", 1);

This is certainly your problem, but it also ensures against very long lines without spaces (ie. a natural break) that would stretch your table-cell sideways.

An alternative, to avoid a jagged edge on both sides, might be to define in your CSS:

.descriptionText { font-size: 10pt; text-align: justify; }

But this does rely in there being spaces in your text for it to be able to wrap. (Also, I'm not sure of browser support for the 'justify' value - I never use, but it may be OK?)