Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Avoid wrap in table cell 1

Status
Not open for further replies.
Glasgow

Glasgow

IS-IT--Management
Jul 30, 2001
1,669
GB
I have a table that shows currency values. However, often when it encounters a negative item, a line-break is generated beween the minus sign and the value.

I have tried including
Code: 
td.Data04           { text-align:right; white-space:nowrap; }
in the CSS but that seems to have no effect.

Any suggestions would be welcomed.
 
Sort by date Sort by votes
I think this might come down to the fact that there are many signs that look virtually the same but behave differently. It is hard to know what the browser interprets at the hyphen/dash/minus sign on the keyboard and some signs might even encourage browsers to break the line. I would suggest you try outputting [tt]−[/tt] to make sure that the actual minus symbol is being printed. Then see if the problem persists.

You can find a list of various elements here:


___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
I'll have a look at that thanks. Strangely, it seems to behave itself when I code it as
Code: 
<td style="white-space:nowrap">-£198.00</td>
but not as
Code: 
<td class="Data04">-£198.00</td>
 
Upvote 0 Downvote
If that is the case, I would expect problems with errors in your css stylesheet or specificity errors. I suggest you load your page in FF with Firebug and inspect the styles applied. This will show you if your style from sheet is applied or not or if it is overwritten by another rule.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
Thanks again. The page renders fine in FF (but not in IE7, sigh) and I did install FireBug. All seemed OK but I will confess that I'm not 100% sure what I should be looking for - i.e. how a problem would be highlighted. Two points I believe are worth raising:

a) Use of &minus; does indeed yield different behaviour - i.e. the item does not wrap. However I'm not sure where that gets me as the "minus" character that is not wrapping is the one that maps to the standard keyboard minus character and has been generated by a Visual Basic currency format.

b) What takes precedence here - width or nowrap? If the specified cell/column width is insufficient to hold the item unwrapped, should that column's width grow to accommodate the item?

 
Upvote 0 Downvote
I have whittled the problem down to this sample HTML:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
table.Report01      { font-family:verdana; font-size:7pt; margin: 20px 0 10px 5px;
                      border-collapse:collapse; border-color:blue; width:720px; }
tr.RowEven,
tr.RowOdd           { height:11px; background-color:white;}

tr.RowEven          { background-color:rgb(215,248,215); }

td.Data03           { width:40px; border: 1px solid; padding:2px; text-align:right;  white-space:nowrap;}
</style>

<title>Example</title>
</head>

<body style="font-family:verdana; font-size:10pt; ">
  <table class="Report01">
    <tr class="RowEven"><td class="Data03" >&minus;£21,516.00</td><td class="Data03" >-£742.00</td></tr>
    <tr class="RowOdd"> <td class="Data03" >-£21,516.00      </td><td class="Data03" ></td></tr>
  </table>
</body>
</html>
 
Upvote 0 Downvote
In the rendering, I can see that the &minus; sign is a bit longer, making me believe that it is a different element. Minus is being treated as part of the word, while the other sign is being treated as a hyphen -- meaning it is intended to hyphenate the words.

Unfortunately, I have no reason as to why white-space: nowrap; only works as an inline style in IE. There are no errors or problems anywhere, it seems to be simply ignoring it. Sometimes the problem would lie in not being specific enough, but that is not your case. Sorry.

Cells grow to accommodate the content (unless you specify table-layout: fixed). That is why content should always take precedence over the width -- including spaces and other elements if the nowrap is specified. But it looks like IE is ignoring the white-space declaration anyway, so you would have to resort to something else.

I still suggest outputting &minus; sign (along with &pound; as well) to avoid all kinds of issues.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
OK thank you. I appreciate your persistence and it's a relief to know I have not totally lost my mind (yet). Yes that makes sense that it's treating the minus as part of the word.

Back to the drawing board. Maybe I can effect a global substitution in the VB code before writing the file content.
 
Upvote 0 Downvote
Vragabond,

Where did you find &minus? I'm dealing with an apparent entity problem as well. Unless I'm blind, neither of these charts seem to list &minus as a standard:


_____
Jeff
[small][purple]It's never too early to begin preparing for [/purple]International Talk Like a Pirate Day
"The software I buy sucks, The software I write sucks. It's time to give up and have a beer..." - Me[/small]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
760
spamjim
spamjim
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
879
spamjim
spamjim
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
701
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top