block height

VooDooChicken · 6-26-12, 04:35 PM

hi, if i make a table, a div or whatever and i set attributes to it, i can set a width, like a 10% width of total width available or something like that, and the browser will, in general, adapt to that value. if i set a value too narrow, and the content can not fit in this value, the block will stretch to fit that content.
i need to do something like that, but with height. i am displaying some content separated in sections, and the last section, at the bottom (a td in a table) should only take the minimum height it requires to display its content.
when i defined it, i set if with 'height="1%"', and it works fine in mozilla, but not in explorer or chrome. if it does not work, i will not tear my hair over it, but still looks ugly. i though that if i set the height as 1%, the content would not fit so uit would stretch to the minimum space to display that section, and that idea works fine in mozilla, but chrome and explorer show all tds with the same height. i later set the td above as height 99% and it all went loose, it would look bad even in mozilla, so i removed the 1% and left only the 99% above, and same results, ugly, does not work as expected. if i replace the 1% by 1 pixel, i get the same results. how do i set in my css something so the container has only the required height, so a single line does not occupy the same height as a section above that may require many lines?

tnx

Builder · 6-27-12, 12:35 AM

Cell height is inherited within a row but not between rows, so you have something else going on here. Check for stray tags, unclosed tags, etc. Also look for "rowspan" or "colspan" attributes that may affect the height of the tr/td in question. Does your CSS have a global td or tr height? Or maybe a container div or table height that's been defined?

The "height" attribute has been deprecated for table cells and rows in HTML5. Haven't looked it up for 4.x or XHTML1.x. I never used the attribute (except for images) so was never concerned with it. But if you are using it that may be a cause as well.

If all else fails I Googled "css table cell height" (without quotes). Lots of articles to choose from there which may help.

Good luck,
Kevin

VooDooChicken · 6-27-12, 11:39 AM

hi Builder, tnx for your comments. the td is in a row which is affected by a rowspan; i believe there are no stray tags, since all the rest works fine, and it seems like width has always worked fine but height does not. as an alternative, i am thinking about spacer transparent gifs, a spacer image with a large height to set enough space in the td above, but this would be kinda dirty.. so far it looks ugly but is not critical; i may look for alternatives later. tnx!

6-26-12, 04:35 PM	#1
VooDooChicken Join Date: Feb 2008 Location: Colombia Posts: 118 Reputation: 32	block height hi, if i make a table, a div or whatever and i set attributes to it, i can set a width, like a 10% width of total width available or something like that, and the browser will, in general, adapt to that value. if i set a value too narrow, and the content can not fit in this value, the block will stretch to fit that content. i need to do something like that, but with height. i am displaying some content separated in sections, and the last section, at the bottom (a td in a table) should only take the minimum height it requires to display its content. when i defined it, i set if with 'height="1%"', and it works fine in mozilla, but not in explorer or chrome. if it does not work, i will not tear my hair over it, but still looks ugly. i though that if i set the height as 1%, the content would not fit so uit would stretch to the minimum space to display that section, and that idea works fine in mozilla, but chrome and explorer show all tds with the same height. i later set the td above as height 99% and it all went loose, it would look bad even in mozilla, so i removed the 1% and left only the 99% above, and same results, ugly, does not work as expected. if i replace the 1% by 1 pixel, i get the same results. how do i set in my css something so the container has only the required height, so a single line does not occupy the same height as a section above that may require many lines? tnx

6-27-12, 12:35 AM	#2
Builder Thinkin' out loud again Join Date: Nov 2002 Location: Illinois Posts: 1,844 Reputation: 262	Cell height is inherited within a row but not between rows, so you have something else going on here. Check for stray tags, unclosed tags, etc. Also look for "rowspan" or "colspan" attributes that may affect the height of the tr/td in question. Does your CSS have a global td or tr height? Or maybe a container div or table height that's been defined? The "height" attribute has been deprecated for table cells and rows in HTML5. Haven't looked it up for 4.x or XHTML1.x. I never used the attribute (except for images) so was never concerned with it. But if you are using it that may be a cause as well. If all else fails I Googled "css table cell height" (without quotes). Lots of articles to choose from there which may help. Good luck, Kevin __________________ A good friend will come and bail you out of jail... but a true friend will be sitting next to you saying, "Damn... that was fun!"

6-27-12, 11:39 AM	#3
VooDooChicken Join Date: Feb 2008 Location: Colombia Posts: 118 Reputation: 32	hi Builder, tnx for your comments. the td is in a row which is affected by a rowspan; i believe there are no stray tags, since all the rest works fine, and it seems like width has always worked fine but height does not. as an alternative, i am thinking about spacer transparent gifs, a spacer image with a large height to set enough space in the td above, but this would be kinda dirty.. so far it looks ugly but is not critical; i may look for alternatives later. tnx!