td issue

[Kevin McLean]

I set table height to 100%, it worked till the moment when I added some conent to td#10. The thing which happened is that content of td#10 streches td#7,td#8,td#9, which makes layout look crooked. And it happens only in IE. Please, could somebody help me to fix it?

css code:

body {background: #000 url(images/bg.jpg) repeat-x; margin: 0; height: 100%;}
table#main {border: 0; width: 100%; height: 100%;}
td#1 {background-image: url(images/index_01.jpg); background-repeat: no-repeat; width: 189px; height: 257px;}
td#2 {background-image: url(images/index_02.jpg); background-repeat: no-repeat; height:187px;}
td#3 {width: 189px; height:187px; }
td#4 {height:187px;}
td#5 {background-image: url(images/index_05.jpg); background-repeat: no-repeat; width: 178px; height: 257px;}
td#6 {background-image: url(images/index_06.jpg); background-repeat: repeat-x; height: 51px;}
td#7 {background-image: url(images/index_07.jpg); background-repeat: no-repeat; width: 31px; height: 38px;}
td#8 {background-image: url(images/index_08.gif); background-repeat: repeat-x; height: 38px;}
td#9 {background-image: url(images/index_09.jpg); background-repeat: no-repeat; width: 34px; height: 38px;}
td#10 {background-image: url(images/index_10.jpg); background-repeat: repeat-y; width: 189px; }
td#11 {background-image: url(images/index_11.jpg); background-repeat: repeat-y; width: 178px; }
td#12 {background-image: url(images/index_12.jpg); background-repeat: repeat-y; width: 31px; }
td#13 {background-image: url(images/index_13.jpg); background-repeat: repeat; width: 100%;}
td#14 {background-image: url(images/index_14.jpg); background-repeat: repeat-y; width: 34px; }
td#15 {background-image: url(images/index_15.jpg); background-repeat: no-repeat; width: 189px;}
td#16 {background-image: url(images/index_16.jpg); background-repeat: no-repeat; width: 178px;}
td#17 {background-image: url(images/index_17.jpg); width: 31px; height: 32px;}
td#18 {background-image: url(images/index_18.gif); background-repeat: repeat-x; height: 32px;}
td#19 {background-image: url(images/index_19.jpg); width: 34px; height: 32px;}
td#20 {background-image: url(images/index_20.jpg); height: 45px;}

[edited by: Kevin_McLean at 8:58 am (utc) on Jan. 11, 2009]

[edited by: engine at 9:34 am (utc) on Jan. 11, 2009]
[edit reason] See TOS [/edit]

[SteveWh]

Your setup with the repeating background and such is more intricate than I'm familiar with, but here are some observations that might help or that might help others to help more easily.

I vaguely recall having troubles with IE (probably IE6 in particular) when table height was set to 100%. I believe the solution was to leave the table height unspecified; the 100% turned out to be unnecessary, at least for whatever it was I was doing.

I notice you specify td heights for td's #1-9, but then stop for #10-16. Oversight?

Also, although I haven't experimented with it, I think that the heights of all the td's in a row will always resize upward so that the entire row is the height of the tallest td in the row. If this makes things look weird, you might be able to adjust by setting the valign property so at least all the td's are aligned to the same top/middle/bottom.

Any height or width you specify is only used as a minimum. Any dimension of a table or element within a table will always expand if necessary so its contents fit within it.

Anyway, that might be a start at a solution.

[edited by: SteveWh at 12:11 pm (utc) on Jan. 11, 2009]

[Kevin McLean]

I´ve ajusted all td to top valign and specified height of all tds in stylesheet, but it did not help. Maybe there is a way (for example js hack) to make IE understand tables like Opera?

[penders]

I notice you specify td heights for td's #1-9, but then stop for #10-16. Oversight?

Although if you specified a height for every internal element, then there certainly wouldn't be any need to specify a height at all for the TABLE. I guess that the idea with the TD's of no-specified height is for them to be dynamic?

IMHO the height of the table should be determined by the height of the individual table rows (sorry, this doesn't really help your problem). Certainly this is how it is in plain ol' HTML where the height attribute is not valid on the TABLE element. Trying to set the height of the table with CSS could be problematic cross browser as I don't believe there is a definite rule(s) as to how it should be rendered? Are you using the TABLE for the sole purpose of 'layout' - may be another reason to rethink?

...content of td#10 streches td#7,td#8,td#9

Are these on the same table row? Ceratinly the TD's on any row will be the same height?

[Kevin McLean]

Actually, I merged all problematic cells (td#7,8,9,12,13,14,17,18,19) into one, so the content has stopped going weidrd. But I'd like to have the effect of scroll and save the layout streachable along browswe height and width, so maybe I can use divs to achieve it.