[thelist] Setting cell heights in IE

Mike Combs mike at combsnet.com
Tue Dec 31 14:19:01 CST 2002

Thanks, Heather.  Your email helped a lot and inspired me to come up with
another workaround.

I went with the "brute force" approach and set the height of the content
cell in the style sheet to 300px.  This works in most cases.  On pages with
a short nav column and a short content cell, it causes the scroll bar to
appear even though there's no content down below, but this was a decent


At 07:44 AM 12/31/2002, you wrote:
>From: Heather Quinn <hgquinn at attglobal.net>
>Make the following change:
><td class="content">i want this tall, remainder of page tall<br>
>add more content<br>
>add more content<br>
>Apparently, MS developers thought that whitespace distribution should
>override a web developer's style specs/intentions when it comes to
>imprecise items like rowspanned columns, and that's what's going on in
>your sample, which has more whitespace than text.
>The rendered text in the "content" cell your sample is "shorter" than
>that in your "nav" cells.  The "nav" cells effectively have three lines
>of text, while "content" has one.  Test this: increase the font size of
>the "content" style about 2.5 times the size of the font you're using in
>your "nav" style.  You'll find "crumbs" collapsing the way you want.
>In the real world, you'll most likely have enough text, etc. in the
>"content" cell so its rendered height will always exceed the rendered
>height of the rowspanned "nav" cells.  But to make sure: Determine how
>high your "nav" cells render by themselves, then always make sure you
>have enough rendered stuff in "content" to make it same or a higher cell
>size than the combined "nav" cells.  For example, if the "nav" cells
>render out to about 200 px high, always keep enough text, etc. in the
>"content" cell so it renders to a minimum of 200 px high, and "crumbs"
>will collapse consistently.  In a pinch, you can throw in a  couple of
>empty paragraphs at the end of "content".
>Mike Combs wrote:
> > ...IE 6 wants to make the height of each cell equal to 50% of
> > the column height.
> >
> > Ahh... just look at the code:
> > <table width="100%" border="1">
> >   <tr>
> >     <td rowspan="2" class="nav">
> >       <p>tall nav</p>
> >       <p>really tall, i mean it</p>
> >       <p>hugely tall</p>
> >     </td>
> >     <td class="crumbs">i want this small</td>
> >   </tr>
> >   <tr>
> >     <td class="content">i want this tall, remainder of page tall</td>
> >   </tr>
> > </table>
> >

More information about the thelist mailing list