Re: [css-d] extra blank rows in table to fill window.

2012-03-08 Thread David Thorp 
Brilliant, that's hit the nail on the head, at least in Safari (both Mac and 
Win).  It doesn't seem to be working in IE9 though.  Did I miss something?  I 
can see you've specifically put code in there for -ms-... (That's for IE, 
right?), so how come not working? :(



On 09/03/2012, at 1:36 AM, Ghodmode wrote:

> On Thu, Mar 8, 2012 at 7:57 PM, Ghodmode  wrote:
> ...
>>  Look again:
>> 
>> http://www.ghodmode.com/testing/dthorp/zstripes/
>> 
>> Here's version 2, which should work everywhere necessary, but would require 
>> you
>> to change the image if you changed the row height:
>> 
>> http://www.ghodmode.com/testing/dthorp/zstripes/v2/
>> 
> ...
>> 
>> I'll also see if I can come up with a version 3 that uses the CSS3 Gradients.
> 
> Here's version 3.  Using a CSS3 linear-gradient.  As expected, there's
> no support in Internet explorer, so I've added some rules that switch
> to fixed height and line-height in IE.  Enjoy:
> 
> http://www.ghodmode.com/testing/dthorp/zstripes/v3/
> 
> And I couldn't have figured it out without these:
> http://lea.verou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/
> https://developer.mozilla.org/en/CSS/linear-gradient#Browser_compatibility
> 
> --
> Vince Aggrippino
> Ghodmode Development
> http://www.ghodmode.com

__
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/

Re: [css-d] Vertical Text Alignment confusion

2012-03-08 Thread David Thorp 
And in Firefox I'm getting some other nasty inconsistencies too.  Haven't dared 
try Chrome or Opera yet, although again, I don't need any of these.  Only IE9 
and Safari. 

But still... why are they all so wildly inconsistent??



On 09/03/2012, at 12:47 PM, David Thorp wrote:

> Brilliant on both counts. Thanks!
> 
> Except... 
> 
> Now (in Safari both mac and windows) I'm getting little resize boxes on each 
> cell in the list.  I also notice these on the on the grey side bar and at the 
> bottom of the list as well.  They seem to show up anywhere i've set overflow, 
> although i thought they were only for when I set resize.  I'm missing 
> something here... once again.
> 
> 
> On the other hand, I'm getting wildly different results in IE9 with just 
> about everything.  (I don't really care about IE8 or below as this is 
> ultimately going to be an internal web application for which I will specify 
> minimum requirements = IE9)
> 
> In IE9:
> • the column widths don't seem to be following the rules
> • the graphic behind the Organisation Name heading is wrong.
> • the borders between certain objects are white instead of black
> • it doesn't seem to be following the sans-serif fonts i've requested.
> 
> 
> I've heard of minor inconsistencies between browsers, but this seems over the 
> top.  Is this typical?  Why don't CSS and HTML just do what they're told?
> 
> Well, again thanks for all the help.  Any further direction here will be 
> equally appreciated!
> 
> David.
> 
> 
> 
> 
> 
> On 08/03/2012, at 10:09 PM, Ghodmode wrote:
> 
>> On Thu, Mar 8, 2012 at 5: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 () not over the whole row?
>> 
>> Sorry, I forgot about that.  You'll want to set the table-layout property for
>> the affected table to fixed (at about line 148 of
>> http://www.davidthorp.name/testingstuff/css/browser-0b.css).  Then set the
>> overflow:hidden for the affected table cells (line 160ish)
>> 
>> 
>>> (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…") ;)
>> 
>> There's a text-overflow:ellipsis property you can set.  Support isn't 
>> perfect,
>> but I think other browsers will simply ignore the property.  So, browsers 
>> that
>> support it will show the ellipsis and browsers that don't will just cut off 
>> the
>> text.  I haven't tested this thoroughly:
>> 
>> .list td {
>> padding: 1px 10px;
>> white-space: nowrap;
>> overflow: hidden;
>> -ms-text-overflow: ellipsis;
>>  -o-text-overflow: ellipsis;
>> text-overflow: ellipsis;
>> }
>> 
>> (also note the vendor-specific -ms- and -o- versions)
>> 
>> ref: https://developer.mozilla.org/en/CSS/text-overflow
>> 
>> --
>> Vince Aggrippino
>> Ghodmode Development
>> http://www.ghodmode.com
>> 
>> 
>>> 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/

Re: [css-d] Vertical Text Alignment confusion

2012-03-08 Thread David Thorp 
Brilliant on both counts. Thanks!

Except... 

Now (in Safari both mac and windows) I'm getting little resize boxes on each 
cell in the list.  I also notice these on the on the grey side bar and at the 
bottom of the list as well.  They seem to show up anywhere i've set overflow, 
although i thought they were only for when I set resize.  I'm missing something 
here... once again.


On the other hand, I'm getting wildly different results in IE9 with just about 
everything.  (I don't really care about IE8 or below as this is ultimately 
going to be an internal web application for which I will specify minimum 
requirements = IE9)

In IE9:
• the column widths don't seem to be following the rules
• the graphic behind the Organisation Name heading is wrong.
• the borders between certain objects are white instead of black
• it doesn't seem to be following the sans-serif fonts i've requested.


I've heard of minor inconsistencies between browsers, but this seems over the 
top.  Is this typical?  Why don't CSS and HTML just do what they're told?

Well, again thanks for all the help.  Any further direction here will be 
equally appreciated!

David.





On 08/03/2012, at 10:09 PM, Ghodmode wrote:

> On Thu, Mar 8, 2012 at 5: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 () not over the whole row?
> 
> Sorry, I forgot about that.  You'll want to set the table-layout property for
> the affected table to fixed (at about line 148 of
> http://www.davidthorp.name/testingstuff/css/browser-0b.css).  Then set the
> overflow:hidden for the affected table cells (line 160ish)
> 
> 
>> (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…") ;)
> 
> There's a text-overflow:ellipsis property you can set.  Support isn't perfect,
> but I think other browsers will simply ignore the property.  So, browsers that
> support it will show the ellipsis and browsers that don't will just cut off 
> the
> text.  I haven't tested this thoroughly:
> 
> .list td {
>  padding: 1px 10px;
>  white-space: nowrap;
>  overflow: hidden;
>  -ms-text-overflow: ellipsis;
>   -o-text-overflow: ellipsis;
>  text-overflow: ellipsis;
> }
> 
> (also note the vendor-specific -ms- and -o- versions)
> 
> ref: https://developer.mozilla.org/en/CSS/text-overflow
> 
> --
> Vince Aggrippino
> Ghodmode Development
> http://www.ghodmode.com
> 
> 
>> 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/

Re: [css-d] Background color for 3 column layout

2012-03-08 Thread David Laakso 
On Thu, Mar 8, 2012 at 11:57 AM, J.C. Berry  wrote:

  I need the
 longest of the three columns (2 or 3) to determine how high the containing
div is.

 J.C. Berry, M.A.

---

There are a number of ways to do that. One is a CSS Table [looks like
a table but its not].
Please see:

Best,
~d
-- 
Chelsea Creek Studio
http://ccstudi.com
__
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/

Re: [css-d] Background color for 3 column layout

2012-03-08 Thread John D 




> I have a three-column layout, all three of which have a white background.
> The page background is black and I need the div containing the three
> columns to expand with its white background down the page. I need the
> longest of the three columns (2 or 3) to determine how high the containing
> div is. I also have footer that clears the three columns fine. How can I do
> this? Thanks!

By using the technique discussed here:







Good luck.



  
__
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-d] Background color for 3 column layout

2012-03-08 Thread J.C. Berry 
Hi all,
I have a three-column layout, all three of which have a white background.
The page background is black and I need the div containing the three
columns to expand with its white background down the page. I need the
longest of the three columns (2 or 3) to determine how high the containing
div is. I also have footer that clears the three columns fine. How can I do
this? Thanks!

-- 
J.C. Berry, M.A.
UI Developer
619.306.1712(m)
jcharlesbe...@gmail.com
portfolio: http://www.mindarc.com


This E-mail is covered by the Electronic Communications Privacy Act, 18
U.S.C. ?? 2510-2521 and is legally privileged. This information is
confidential information and is intended only for the use of the individual
or entity named above. If the reader of this message is not the intended
recipient, you are hereby notified that any dissemination, distribution or
copying of this communication is strictly prohibited.

__
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/

Re: [css-d] extra blank rows in table to fill window.

2012-03-08 Thread Ghodmode 
On Thu, Mar 8, 2012 at 7:57 PM, Ghodmode  wrote:
...
> Look again:
>
> http://www.ghodmode.com/testing/dthorp/zstripes/
>
> Here's version 2, which should work everywhere necessary, but would require 
> you
> to change the image if you changed the row height:
>
> http://www.ghodmode.com/testing/dthorp/zstripes/v2/
>
...
>
> I'll also see if I can come up with a version 3 that uses the CSS3 Gradients.

Here's version 3.  Using a CSS3 linear-gradient.  As expected, there's
no support in Internet explorer, so I've added some rules that switch
to fixed height and line-height in IE.  Enjoy:

http://www.ghodmode.com/testing/dthorp/zstripes/v3/

And I couldn't have figured it out without these:
http://lea.verou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/
https://developer.mozilla.org/en/CSS/linear-gradient#Browser_compatibility

--
Vince Aggrippino
Ghodmode Development
http://www.ghodmode.com
__
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/

Re: [css-d] extra blank rows in table to fill window.

2012-03-08 Thread Duncan Hill 
On Thu, 08 Mar 2012 10:36:34 -, David Thorp  
 wrote:


I agree, the nested tables are not great, but I hit all sorts of  
problems trying to do it with divs and floats, and while I had a couple  
of helpful tips from people on this list about that I haven't got my  
head quite around them yet.  A couple of people suggested it's not so  
bad to do it in tables, but I'd still like to do it without them.  So  
I'll be returning to that particular goal later.


In the meantime, thanks for your demo, although that doesn't really  
achieve what I'm trying to achieve.  The purpose is for each row of the  
table to be alternating colors.  It's not just a pretty pattern to sit  
behind the table.


Maybe you're onto something with the CSS3 gradient idea.  Perhaps the  
ideal solution would be somehow programmatically generating the  
background "image" to match the row height.  Perhaps I'll look into  
that.  Any thoughts?


David.



Try taking a look at CSS3 'nth-child'

It isn't supported in IE before IE9 (Ithink) but for the older browsers it  
can be enabled very simply with a little bit of jQuery.

http://dev.opera.com/articles/view/zebra-striping-tables-with-css3/
or
http://css-tricks.com/how-nth-child-works/
if you look through CSS-Tricks I seem to remember that there was an  
article describing the addition of jQuery when required.


The striping of your tables is not your main worry at the minute, you  
should be looking more at creating a stable page, handle the 'striping' as  
an 'enhancement'.


Duncan
__
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/

Re: [css-d] extra blank rows in table to fill window.

2012-03-08 Thread Ghodmode 
On Thu, Mar 8, 2012 at 6:36 PM, David Thorp
 wrote:
> I agree, the nested tables are not great, but I hit all sorts of problems 
> trying to do it with divs and floats, and while I had a couple of helpful 
> tips from people on this list about that I haven't got my head quite around 
> them yet.  A couple of people suggested it's not so bad to do it in tables, 
> but I'd still like to do it without them.  So I'll be returning to that 
> particular goal later.
>
> In the meantime, thanks for your demo, although that doesn't really achieve 
> what I'm trying to achieve.  The purpose is for each row of the table to be 
> alternating colors.  It's not just a pretty pattern to sit behind the table.

hmmm...  The background-size property is supported in Chrome and Safari, but
they don't seem to render it as expected.  Firefox and IE9 render it as you
described with the colors accurately aligned with the rows, but Chrome and
Safari don't.

I can't tell exactly why it's happening.  Looking at computed styles in Chrome
shows that the background-size is 1px larger than it should be.  Another
surprise, Firebug doesn't show a computed value for the background-size
property.

I can only guess it's a mathematical precision thing.  Changing the em values
only slightly (from 1.3/2.6 to 1.2/2.4) corrects the problem in Safari and
Chrome.  Look again:

http://www.ghodmode.com/testing/dthorp/zstripes/

Here's version 2, which should work everywhere necessary, but would require you
to change the image if you changed the row height:

http://www.ghodmode.com/testing/dthorp/zstripes/v2/


> Maybe you're onto something with the CSS3 gradient idea.  Perhaps the ideal 
> solution would be somehow programmatically generating the background "image" 
> to match the row height.  Perhaps I'll look into that.  Any thoughts?

I'll also see if I can come up with a version 3 that uses the CSS3 Gradients.

--
Vince Aggrippino
Ghodmode Development
http://www.ghodmode.com


> 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/

Re: [css-d] Vertical Text Alignment confusion

2012-03-08 Thread Ghodmode 
On Thu, Mar 8, 2012 at 5: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 () not over the whole row?

Sorry, I forgot about that.  You'll want to set the table-layout property for
the affected table to fixed (at about line 148 of
http://www.davidthorp.name/testingstuff/css/browser-0b.css).  Then set the
overflow:hidden for the affected table cells (line 160ish)


> (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…") ;)

There's a text-overflow:ellipsis property you can set.  Support isn't perfect,
but I think other browsers will simply ignore the property.  So, browsers that
support it will show the ellipsis and browsers that don't will just cut off the
text.  I haven't tested this thoroughly:

.list td {
  padding: 1px 10px;
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
   -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

(also note the vendor-specific -ms- and -o- versions)

ref: https://developer.mozilla.org/en/CSS/text-overflow

--
Vince Aggrippino
Ghodmode Development
http://www.ghodmode.com


> 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/

Re: [css-d] extra blank rows in table to fill window.

2012-03-08 Thread David Thorp 
I agree, the nested tables are not great, but I hit all sorts of problems 
trying to do it with divs and floats, and while I had a couple of helpful tips 
from people on this list about that I haven't got my head quite around them 
yet.  A couple of people suggested it's not so bad to do it in tables, but I'd 
still like to do it without them.  So I'll be returning to that particular goal 
later.

In the meantime, thanks for your demo, although that doesn't really achieve 
what I'm trying to achieve.  The purpose is for each row of the table to be 
alternating colors.  It's not just a pretty pattern to sit behind the table.

Maybe you're onto something with the CSS3 gradient idea.  Perhaps the ideal 
solution would be somehow programmatically generating the background "image" to 
match the row height.  Perhaps I'll look into that.  Any thoughts?

David.













On 08/03/2012, at 9:23 PM, Ghodmode wrote:

> On Thu, Mar 8, 2012 at 1:22 PM, David Thorp
>  wrote:
>> Hi all,
>> 
>> Another question on my current project...
>> 
>> Again, first, here's the code:
>> 
>>http://www.davidthorp.name/testingstuff/browser-tables-2.html
>>http://www.davidthorp.name/testingstuff/css/browser-tables-2.css
>> 
>> Also look at this image for reference:
>> 
>>http://www.davidthorp.name/testingstuff/FinderWindow.png
>> 
>> So here's the thing.  That Finder list shows alternating table rows 
>> (white/light blue) regardless of if there's any data in the row.  Empty 
>> table rows fill the window height if the window is larger than the number of 
>> rows holding data.   I want the same effect in the list part of my page.
>> 
>> Note that the container for the list is set to overflow, so a (vertical) 
>> scrollbar appears if the window is too small (vertically) for all the rows 
>> with data to appear.  But any solution we come up with for displaying the 
>> "empty" rows when the window is taller than the data needs to ensure no 
>> scroll bar appears then.
>> 
> 
> I can't even begin to make sense of that mess of deeply nested tables at your
> site.  This is one of the drawbacks of using tables for layout.  It's hard for
> others to understand your code and will probably even be hard for you to
> understand it if you return to it in the future after not working on it for a
> while.
> 
> I managed to put together a very simple demo of the effect you're looking for:
> 
> http://www.ghodmode.com/testing/dthorp/zstripes/
> 
> It uses a background image like in your second idea, but it sets the 
> background
> on both the table and its container.
> 
> This demo solves the problem of changing row heights using the CSS3 property
> background-size.  This way you only have to make changes in your CSS if you
> change the row height.  Unfortunately, this isn't supported in IE8 or earlier.
> 
> While we're relying on CSS3, it occurs to me that we should be able to 
> implement
> this without using images at all if we use a CSS3 gradient with several color
> stops.  I haven't tried it yet, though.
> 
> You can support most browsers with a fixed height and line-height that matches
> the height of a row in your background image, but like you already noted, you
> would have to change the image if you changed the height of a row.
> 
> --
> Vince Aggrippino
> Ghodmode Development
> http://www.ghodmode.com
> 
>> I've thought of a couple of ways I might accomplish this.
>> 
>> 1. put another table behind the data one, with the same settings but no data 
>> in it.  This could be a very large number of rows.  Trouble is the presence 
>> or existence of the scroll bar is defined by the overflow setting of the 
>> container object, and since both tables (the one with data and the one with 
>> empty rows) are in the same containing object I can't win.  I'm trying to 
>> get my head around the idea that maybe I can somehow have two container 
>> objects with different overflow settings, but that's starting to do my head 
>> in and I'd like to see if there are any other common/recognised methods of 
>> achieving this.
>> 
>> 2. I could create a small jpeg that looks like two blank rows of the same 
>> table and set it to repeat.  But then if I decide to change the row height 
>> of the table rows for the data list, then I have to put in a different 
>> image, and that'll just get messy.
>> 
>> Each of these has issues, or is potentially pretty complicated, and I keep 
>> telling myself surely there's an easy way to do this.
>> 
>> Logically I just think there should be some way to create a table with an 
>> indeterminate number of rows and that just grows automatically (by 
>> increasing the number of rows, not by increasing the height of each row) to 
>> fill the available space, kinda like an image set to repeat does.
>> 
>> Has anyone ever done something like this before, and is there an easy way to 
>> do it that I'm missing?
>> 
>> Thanks!
>> David.
>> __

Re: [css-d] extra blank rows in table to fill window.

2012-03-08 Thread Markus Ernst 

Am 08.03.2012 06:22 schrieb David Thorp:

Hi all,

Another question on my current project...

Again, first, here's the code:

http://www.davidthorp.name/testingstuff/browser-tables-2.html
http://www.davidthorp.name/testingstuff/css/browser-tables-2.css

Also look at this image for reference:

http://www.davidthorp.name/testingstuff/FinderWindow.png

So here's the thing.  That Finder list shows alternating table rows 
(white/light blue) regardless of if there's any data in the row.  Empty table 
rows fill the window height if the window is larger than the number of rows 
holding data.   I want the same effect in the list part of my page.

Note that the container for the list is set to overflow, so a (vertical) scrollbar 
appears if the window is too small (vertically) for all the rows with data to appear.  
But any solution we come up with for displaying the "empty" rows when the 
window is taller than the data needs to ensure no scroll bar appears then.

I've thought of a couple of ways I might accomplish this.

1. put another table behind the data one, with the same settings but no data in 
it.  This could be a very large number of rows.  Trouble is the presence or 
existence of the scroll bar is defined by the overflow setting of the container 
object, and since both tables (the one with data and the one with empty rows) 
are in the same containing object I can't win.  I'm trying to get my head 
around the idea that maybe I can somehow have two container objects with 
different overflow settings, but that's starting to do my head in and I'd like 
to see if there are any other common/recognised methods of achieving this.


This is going to be very hard. I'd rather try to use jQuery to add rows 
to the table until the bottom is reached (which is off topic in this 
list; maybe you could find help on this approach in a javascript or 
jQuery forum).



2. I could create a small jpeg that looks like two blank rows of the same table 
and set it to repeat.  But then if I decide to change the row height of the 
table rows for the data list, then I have to put in a different image, and 
that'll just get messy.


Maybe you could experiment with background-size:
http://www.w3.org/TR/2012/WD-css3-background-20120214/#the-background-size

As I understand it, something like this should theoretically go in the 
direction you want:


.list {
  background-image: url(background.png);
  background-size: auto 2.4em;
}
td {
  height: 1.2em;
  vertical-align:middle;
}

Anyway I haven't tested this, and I have no idea about the actual 
browser support of background-size. And any background-image related 
solution has of course the downside that it will break if there are 
entries with multiple lines in the table.


__
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/

Re: [css-d] extra blank rows in table to fill window.

2012-03-08 Thread Ghodmode 
On Thu, Mar 8, 2012 at 1:22 PM, David Thorp
 wrote:
> Hi all,
>
> Another question on my current project...
>
> Again, first, here's the code:
>
>        http://www.davidthorp.name/testingstuff/browser-tables-2.html
>        http://www.davidthorp.name/testingstuff/css/browser-tables-2.css
>
> Also look at this image for reference:
>
>        http://www.davidthorp.name/testingstuff/FinderWindow.png
>
> So here's the thing.  That Finder list shows alternating table rows 
> (white/light blue) regardless of if there's any data in the row.  Empty table 
> rows fill the window height if the window is larger than the number of rows 
> holding data.   I want the same effect in the list part of my page.
>
> Note that the container for the list is set to overflow, so a (vertical) 
> scrollbar appears if the window is too small (vertically) for all the rows 
> with data to appear.  But any solution we come up with for displaying the 
> "empty" rows when the window is taller than the data needs to ensure no 
> scroll bar appears then.
>

I can't even begin to make sense of that mess of deeply nested tables at your
site.  This is one of the drawbacks of using tables for layout.  It's hard for
others to understand your code and will probably even be hard for you to
understand it if you return to it in the future after not working on it for a
while.

I managed to put together a very simple demo of the effect you're looking for:

http://www.ghodmode.com/testing/dthorp/zstripes/

It uses a background image like in your second idea, but it sets the background
on both the table and its container.

This demo solves the problem of changing row heights using the CSS3 property
background-size.  This way you only have to make changes in your CSS if you
change the row height.  Unfortunately, this isn't supported in IE8 or earlier.

While we're relying on CSS3, it occurs to me that we should be able to implement
this without using images at all if we use a CSS3 gradient with several color
stops.  I haven't tried it yet, though.

You can support most browsers with a fixed height and line-height that matches
the height of a row in your background image, but like you already noted, you
would have to change the image if you changed the height of a row.

--
Vince Aggrippino
Ghodmode Development
http://www.ghodmode.com

> I've thought of a couple of ways I might accomplish this.
>
> 1. put another table behind the data one, with the same settings but no data 
> in it.  This could be a very large number of rows.  Trouble is the presence 
> or existence of the scroll bar is defined by the overflow setting of the 
> container object, and since both tables (the one with data and the one with 
> empty rows) are in the same containing object I can't win.  I'm trying to get 
> my head around the idea that maybe I can somehow have two container objects 
> with different overflow settings, but that's starting to do my head in and 
> I'd like to see if there are any other common/recognised methods of achieving 
> this.
>
> 2. I could create a small jpeg that looks like two blank rows of the same 
> table and set it to repeat.  But then if I decide to change the row height of 
> the table rows for the data list, then I have to put in a different image, 
> and that'll just get messy.
>
> Each of these has issues, or is potentially pretty complicated, and I keep 
> telling myself surely there's an easy way to do this.
>
> Logically I just think there should be some way to create a table with an 
> indeterminate number of rows and that just grows automatically (by increasing 
> the number of rows, not by increasing the height of each row) to fill the 
> available space, kinda like an image set to repeat does.
>
> Has anyone ever done something like this before, and is there an easy way to 
> do it that I'm missing?
>
> 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/

Re: [css-d] Vertical Text Alignment confusion

2012-03-08 Thread David Thorp 
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 () 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
>>  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/

Re: [css-d] Vertical Text Alignment confusion

2012-03-08 Thread David Thorp 
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 () 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
>  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/

Re: [css-d] Vertical Text Alignment confusion

2012-03-08 Thread Ghodmode 
On Thu, Mar 8, 2012 at 12:53 PM, David Thorp
 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/