TD cell heights

[themissingelf]

IE6 does not seem to respond to the following; it allows the cell height to stretch if the entire table is not >the screen height:

TD.title { 
height: 80px; 
}

Mozilla 1.3.1 and Opera 7.11 both seem quite happy.

[Jeff Lange]

IE treats height/width the same way Mozilla/Opera treat min-height/min-width.

Something to keep in mind.

[themissingelf]

IE treats height/width the same way Mozilla/Opera treat min-height/min-width.

Something to keep in mind.

OK, so now I'm gonna be thick... How does Mozilla/Opera treat min-height/min-width?

[platinum]

OK, so now I'm gonna be thick... How does Mozilla/Opera treat min-height/min-width?

That is will let content overflow if there is "more" of it that the height will allow. If you put height into mozilla it will stay at that height

[themissingelf]

I see. So perhaps the most reliable way of managing a table cell height is to revert to the height attribute in the tag?

[platinum]

well, there technically isn't a height attribute for table cells at all as it's depreciated, but anywho

The method I have found that works is to use both in your styles:

Height: 10px;
min-height: 10px;

IE will use the first one and NS will override it with the 2nd

[hurricane.uk]

The method I have found that works is to use both in your styles:

Height: 10px;
min-height: 10px;

IE will use the first one and NS will override it with the 2nd

The only problem with that is that while IE will stretch the height to accommodate the content Gecko won't, as it is in the example Gecko will always set the element to 10px high. One way around it, if stretching is required, is to override the initial style definition (containing height:Xpx; for the benefit of IE) by using a child selector containing height:auto; min-height:Xpx; for Gecko.

eg

#example { height: 50px; }
html>body #example { height: auto; min-height: 50px; }

If stretching isn't required/wanted then using overflow:auto; is good.

[themissingelf]

Stretching is NOT required. I want to limit the 'TD.title' to 80px in height.

Also, I've not quite got to grips with the "html>body" spec in CSS. What does this do?

[ucahg]

html>body selects the direct child "body" of the "html" element. It's used because Internet Explorer doesn't understand it, so you can send some code to Internet Explorer, and override it using this selector for other browsers.

To limit the height to 80px, you may need to set the overflow style so it will clip (that is the content of the container will not be rendered outside it's dimensions. overflow:hidden is the property you're looking for). I think that should do it.