Fixing row heights

[Andrew Ayre]

Hi,

I have the following table layout:

---------------------

| A | E |

------ |

| B | |

------ |

| C | |

------ |

| D | |

| | |

| | |

---------------------

I want cells A, B and C to always be 21px in height. I want cell D to vary
in height according to the height of the table.

Problem: If E has too much text in it, cells A, B, C and D are all increased
in height to match. I only want cell D to increase in height.

Do you know how I can solve this problem? I've tried using height="21" in
the td tag and using min-height, max-height and height in a CSS class for
the td tag but it didn't work.

Andy

[Stephen Poley]

On Mon, 20 Oct 2003 17:04:40 GMT, "Andrew Ayre" <an**@nospam.com> wrote:

I want cells A, B and C to always be 21px in height. I want cell D to vary
in height according to the height of the table.

Problem: If E has too much text in it, cells A, B, C and D are all increased
in height to match. I only want cell D to increase in height.

Do you know how I can solve this problem? I've tried using height="21" in
the td tag and using min-height, max-height and height in a CSS class for
the td tag but it didn't work.

I suspect you solve it by scrapping the table - or at least by making
A,B,C and D into one cell. But without further info it's hard to be
sure. Do you have a URL?

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[Andrew Ayre]

Thanks for replying Stephen.

Here is the original problem:

http://www.handicaching.com/work/layout.html

I managed to partially solve it by using a nested table. However, that has
created a second problem, in that I want the nested table to fill the
container cell it is in. You can see that here:

http://www.handicaching.com/work/layout2.html

Thanks for your help!

Andy
Replace nospam with britishideas to reply
"Stephen Poley" <sb*****@xs4all.nl> wrote in message
news:7s********************************@4ax.com...

On Mon, 20 Oct 2003 17:04:40 GMT, "Andrew Ayre" <an**@nospam.com> wrote:

I want cells A, B and C to always be 21px in height. I want cell D to varyin height according to the height of the table.

Problem: If E has too much text in it, cells A, B, C and D are all increasedin height to match. I only want cell D to increase in height.

Do you know how I can solve this problem? I've tried using height="21" in
the td tag and using min-height, max-height and height in a CSS class for
the td tag but it didn't work.

I suspect you solve it by scrapping the table - or at least by making
A,B,C and D into one cell. But without further info it's hard to be
sure. Do you have a URL?

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[Brian]

Please don't top-post.

Andrew Ayre wrote:

I managed to partially solve it by using a nested table.

Don't use tables for layout.
http://davespicks.com/essays/notables.html

Here's some links on how to do layouts w/out tables.
http://www.allmyfaqs.com/cgi-bin/wik...leless_layouts

--
Brian
follow the directions in my address to email me

[Stephen Poley]

On Tue, 21 Oct 2003 20:28:25 GMT, "Andrew Ayre" <an**@nospam.com> wrote:

Thanks for replying Stephen.

Here is the original problem:

http://www.handicaching.com/work/layout.html
Assuming you are referring to the buttons on the left-hand side, the
solution is (as I suspected) not to put them in separate table-cells at
all. Chances are that you can simply place the images one after another,
or otherwise in LIs with CSS list-style: none. If you want more control
over background colours etc, you might conceivably need separate DIVS.

Note: if your images are in fact going to contain only text, as at
present, use text and CSS styling rather than images. This gives easier
maintenance, quicker downloading, and a better result for the reader. I
have a page on the more complicated problem of horizontal CSS
button-bars:
http://www.xs4all.nl/~sbpoley/webmat...ssbuttons.html

Vertical bars like yours are easier.

Do consider dropping the layout table completely. It's only needed if
you still have a lot of Netscape 4 users among your readership (and
perhaps not even then) - and there aren't many sites where that is still
the case.
I managed to partially solve it by using a nested table.

Nested tables are a maintenance nightmare. Only to be used if there are
*very* good reasons.

HTH

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[Andrew Ayre]

Thanks Brian and Stephen for your help! I will look into CSS layouts. I was
just a little hesitant that a lot of people might not be able to use the
site if I did that, but so many sites seem to use CSS now.

Andy

"Stephen Poley" <sb*****@xs4all.nl> wrote in message
news:nr********************************@4ax.com...

On Tue, 21 Oct 2003 20:28:25 GMT, "Andrew Ayre" <an**@nospam.com> wrote:

Thanks for replying Stephen.

Here is the original problem:

http://www.handicaching.com/work/layout.html

Assuming you are referring to the buttons on the left-hand side, the
solution is (as I suspected) not to put them in separate table-cells at
all. Chances are that you can simply place the images one after another,
or otherwise in LIs with CSS list-style: none. If you want more control
over background colours etc, you might conceivably need separate DIVS.

Note: if your images are in fact going to contain only text, as at
present, use text and CSS styling rather than images. This gives easier
maintenance, quicker downloading, and a better result for the reader. I
have a page on the more complicated problem of horizontal CSS
button-bars:
http://www.xs4all.nl/~sbpoley/webmat...ssbuttons.html

Vertical bars like yours are easier.

Do consider dropping the layout table completely. It's only needed if
you still have a lot of Netscape 4 users among your readership (and
perhaps not even then) - and there aren't many sites where that is still
the case.

I managed to partially solve it by using a nested table.

Nested tables are a maintenance nightmare. Only to be used if there are
*very* good reasons.

HTH

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[Brian]

Please don't top-post. (2nd time I've said this to you)

http://www.allmyfaqs.com/cgi-bin/wiki.pl?How_to_post

Andrew Ayre wrote:

Thanks Brian and Stephen for your help!
You're quite welcome.
I will look into CSS layouts. I was just a little hesitant that a
lot of people might not be able to use the site if I did that,
On the contrary. CSS is optional suggestions for layout. The most
important step to making a site that is usable is to write valid and
robust html. Use CSS to enhance the visual presentation only after
you have a robust site.

CSS can screw things up in a couple of old browsers, in particular
Netscape 4 and IE 3/4. For those, I'd advise that you hide css from
them. It is easy, and your site will still be useable in those
browsers. Read the group, read the faq, and you'll learn how to code
around browser bugs in css.
but so many sites seem to use CSS now.

It's better for the author, better for the user.

--
Brian
follow the directions in my address to email me

[Stephen Poley]

On Wed, 22 Oct 2003 17:29:19 GMT, "Andrew Ayre" <an**@nospam.com> wrote:

Thanks Brian and Stephen for your help! I will look into CSS layouts. I was
just a little hesitant that a lot of people might not be able to use the
site if I did that, but so many sites seem to use CSS now.

One nice thing about using CSS is that the site remains usable even for
those people without it (well, unless you do something pretty strange
with it.) They just get a plain browser-default presentation.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[Larry Bud]

"Andrew Ayre" <an**@nospam.com> wrote in message news:<IA*****************@newsread4.news.pas.earth link.net>...

Hi,

I have the following table layout:

Andrew,

Why have the A,B,C,D in separate cells? Just combine the menu into
one long vertical cell, top align it, and it will expand and fill as
needed. I've added a vertical spacing to each button image to space
them out as needed....
Here you go:

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Handicaching</title>
<style type="text/css">
..side
{
background: #d2d3ff url('sideswish.gif') no-repeat left bottom;
min-height:210px; height:210px; background-color:#d2d3ff
}

..button
{
min-height: 21px;
max-height: 21px;
height: 21px;
}

</style>
</head>

<body>

<center>
<table width="750" cellspacing="0" cellpadding="0" border="1">
<tr>
<td colspan="3" height="64"><img src="topbar.gif" width="750"
height="64"></td>
</tr>
<tr>
<td width="71" valign="top" bgcolor="#D2D3FF">
<img src="ratebutton.gif" vspace="3" width="128" height="21"><br>
<img src="findbutton.gif" vspace="3" width="128" height="21"><img
src="loginbutton.gif" vspace="3" width="128" height="21"><img
src="faqbutton.gif" vspace="3" width="128" height="21"></td>
<td width="13" valign="top" bgcolor="#FFFCAF">
<img src="buttonright.gif" vspace="3" width="13" height="21"><br>
<img src="buttonright.gif" vspace="3" width="13" height="21"><br>
<img src="buttonright.gif" vspace="3" width="13" height="21"><br>
<img src="buttonright.gif" vspace="3" width="13" height="21"></td>
<td width="609" bgcolor="#fffcaf" valign="top">
<!--text-->foo<p>g</p>
<p>hg</p>
<p>ggf</p>
<p>fff</p>
<p>ffffsd</p>
<p>c</p>
<p>zz</p>
<p>q</p>
<p>aa</p>
<p>z<!--text end--></td>
</tr>
<tr>
<td colspan="3" height="20">
<img src="bottombar.gif" width="750" height="20"></td>
</tr>
</table>
</center>

</body>

</html>