Table Height Property in IE

[Jojee]

Apparently internet explorer doesn't recognize the table height property, nor does it recognize style="height: 159px;" nor does it recognize style="max-height: 159px;" so how am I supposed to set a table height? It looks fine when I don't have a lot of text that stretches the page, but when I have to scroll it completely screws up. This works in Firefox and every other browser. :(

[Flying Mullet]

HTML Table Height woes (http://www.liamdelahunty.com/tips/html_table_height.php)

Unfortantly, the HTML standard published by the World Wide Web Consortium (W3C) and now adopted by most browsers is that there isn't a height attribute for tables. The thinking seems to be, that tables should be used for presenting tabular information and not for layouts.
One thing they're suggesting is putting the table in a div which has the height attribute set.

[Jojee]

I'm not sure if that would quite work with what I'm trying to do. My table looks like this:

<table width="300" border="1">
<tr><td colspan="3" width="300">Top image - fixed height.</td></tr>
<tr>
<td width="100" bgcolor="red">Image. This table is supposed to have a FIXED height.</td>
<td rowspan="3" width="100">Blah blah blah this is the center, the height in this table is supposed to expand.</td>
<td rowspan="3" width="100">This is the right sidebar. The height of this table is supposed to expand.</td>
</tr>
<tr><td width="100" bgcolor="red">This is the left sidebar content. It's supposed to be FIXED at a certain height.</td>
</tr>
<tr>
<td width="100" bgcolor="red">This is the cell on the left side that's supposed to expand. Instead, the other two are expanding.</td>
</tr>
<td colspan="3" width="300">Bottom image - fixed height.</td>
</tr></table>

Red = problematic. As you can see, the whole left side is not doing what it's supposed to do.

Now, I can merge the two top left tables together and just deal with the non-aesthetic qualities of the 3rd one, and use DIVs to regulate how far down the content starts. But I'd rather not have to crop the images and redo the whole layout again. I can't believe IE doesn't have table heights, screw them. There's no way to fix it?


Edit: Oh and the table is already set to 100% height.

Edit2: And I tried DIVs before I tried tables, wasted a few hours. ALL of the cells have a background image, and the table itself also has a background image. I couldn't get the divs to be aligned right and for them to expand in the right places, too. I'm much more familiar with tables than with DIVs. Meh I think I'll just go re-crop my images.

[crono_logical]

Why do the three red cells need to be separate? :p Can't you join them into one tall cell like the others, and use divs for what would have been in the top two to make them the size you want? :p

You probably don't need to crop the images either and just use some CSS trickery to fix it together - case in point, look at google search result pages, all the "pictures" (outside the results themselves) are actually the same image and there's only one image for them on the whole page :Dfor

[Baloki]

And now we introduce a new villian to our arena, known for carrying out evil among the land "min-height" has been setting minimum height settings on table cells for years now, but can he take on Joy? WE'LL HAVE TO SEE IN OUR NEXT THRILLING INSTALLMENT OF TALES OF VERY LITTLE INTEREST!

[Jojee]

lol what Baloki

I did combine the first two red cells together. The last one I can't combine though, because it's a sidebar bottom closer type thing. You know what I mean? xD Anyway, whatever, I sort of resolved this myself, and screw IE users.

[Baloki]

Seriously just set a style="min-height: xxpx;" on the cell...

[Jojee]

Shouldn't I be using max height since I want it not to stretch? :p and max height didn't work. I already changed it anyway. xD

[Jessweeee♪]

IE is mean! It won't accept the spelling of "grey"!

[Flying Mullet]

I never use color spellings in html. :p

[Jojee]

Okay because I'm like making all the threads ever in the help forum, I'll just ask here.

What's a substitute for line-height in IE? IE doesn't seem to recognize line-height. :(

[o_O]

Line height is recognised in IE. :p

Perhaps you have another CSS style overriding your line-height property? The order of stylesheet rule precedence is: inline (in the tag itself) > &lt;style> tag in the page header > external stylesheet from file. So try setting "line-height: 1px;" in the tag of the element you need to alter the height of since that has the highest precedence. :p

[Jojee]

o_O I dunno then. I have &lt;div style="line-height: 50px;"&gt; right around the lines, and it shows up fine in Firefox. Just doesn't in IE...??

[o_O]

In that case, you should carefully take note of every style that is applied to that particular div element. If you have another style applied to the parent element of the div (i.e. a style that's also applied to the div), then it may be overriding the line-height you have set in the div. :p

[Jojee]

Nah, it has to do with how IE doesn't display images and line heights right, I'm guessing. Because with text, IE will display my desired line height fine. But I'm trying to evenly space avatar images without tables, and that didn't work. I fixed it though. I got rid of the line-height div and just put transparent images of my desired height around the images I wanted to show. ^_^