Hi Vince,
Thanks for another helpful reply. That all makes sense.
One small problem with the nowrap...
See this:
http://www.davidthorp.name/testingstuff/browser-0b.html
http://www.davidthorp.name/testingstuff/browser-0b.css
I've created a couple of really long values in the list and the problem is the
nowrap makes the length of the text override the width of the column. How do i
get the column width to override the text and just cut the text off in each
cell (<td>) not over the whole row?
(Then if there's a way to make it automatically add an ellipsis (...) at the
end of a row of text that's been cut short, that would be even more awesome.
ie. "a really really rea…") ;)
Thanks!
David.
On 08/03/2012, at 7:41 PM, Ghodmode wrote:
> On Thu, Mar 8, 2012 at 12:53 PM, David Thorp
> <[email protected]> wrote:
>> Greetings all,
>>
>> Thanks again to those who helped me last week. A couple of new problems now.
>>
>> First, here's the code:
>>
>> http://www.davidthorp.name/testingstuff/browser-tables-2.html
>> http://www.davidthorp.name/testingstuff/css/browser-tables-2.css
>>
>> My confusion lies with the display of text in various situations...
>
>> Vertical alignment of labels relative to fields in forms. Eg. On the right
>> hand side of the page the "Organisation Name" label is aligned with the top
>> of the field entry box, when I'd like it to be centre-aligned (vertically).
>> I've tried everything I can think of but I'm not getting it.
>
> The text in the label is vertically aligned within its line-height. So, you
> just need to have the line-height set to the same as the height of the input
> text boxes.
>
> For example, this works:
> /* from http://www.davidthorp.name/testingstuff/css/browser-tables-2.css at
> * about line 207 */
> .form label, .form input {
> display: block;
> width: 60%;
> line-height: 1.8em;
> height: 1.8em;
> }
>
> Note that I don't know what the default height of an input box is, so I set it
> explicitly.
>
>> If the window is made small enough such that the column width of the list is
>> not wide enough to hold all the text (eg. "All About Abundance P/L" in the
>> first row of the list), then it wraps the text and doubles the height of the
>> row. I would like it, instead, to just hide whatever text it can't fit and
>> NOT adjust the table row height. This is the same with the table heading
>> ("Organisation Name") as well. Again, I've tried everything I can think of
>> but I can't seem to stop it from wrapping.
>
> The white-space property is used to prevent word wrapping:
>
> /* http://www.davidthorp.name/testingstuff/css/browser-tables-2.css at about
> * line 158 */
> .list td {
> padding: 1px 10px;
> white-space: nowrap;
> }
>
> ref: http://www.w3.org/TR/CSS21/text.html#propdef-white-space
>
> --
> Vince Aggrippino
> Ghodmode Development
> http://www.ghodmode.com
>
>> I have some other questions relating to this entire page, but I'll put them
>> in separate emails so as not to make one too long.
>>
>> Any guidance would be most appreciated. :)
>>
>> Thanks!
>> David.
> ______________________________________________________________________
> css-discuss [[email protected]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
