Correction: > http://www.davidthorp.name/testingstuff/browser-0b.html > http://www.davidthorp.name/testingstuff/css/browser-0b.css
On 08/03/2012, at 8:54 PM, David Thorp wrote: > 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 >> <mailingli...@allaboutabundance.com> 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 [css-d@lists.css-discuss.org] >> 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 [css-d@lists.css-discuss.org] > 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 [css-d@lists.css-discuss.org] 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/
