stretching internal tables to fit a cell

How can I do this?

Case in point: check out the navbar on the left

In the left navbar is a td with an internal table with buttons, links, and stripes in it. But for some reason it doesn't stretch to the bottom. I want the height of that internal table to be just less than the variable height of the td cell (it's variable because it increases with the length of the content).

Thanks for your help - I know I ask more than I help around here but I am very young and very inexperienced with all of this.

~david_sakh

 

set the internal table height to "100%"

 

thats totally a no no in html. You cannot specify a table's height and have it work in every browser.

You'll probably want to rethink your tablle layout and see what other alternatives can be used. I know it's tricky making tables work right but 100% height is not the way.

 

damn tables. I think I'll be opening up a layers tut soon enough.

 

check out this page of mine Vimy Ridge . The left-hand side menu table stretches all the way to the bottom with the content, except for the bottom bar that stops it. It works in all browsers, even the crappy NN4.

 

The easy fix is to put the entire page into a table with the left cell for navigation. Then it will always reach the end of the page. I use a three cell table for project responder. It works great.

 

ok, well i have a related question and ive been starting many threads lately so ill just continue the dicussion here:

Try the link above again, I fixed the last problem, but now I have another one. I am using images in a table to give the illusion of buttons for the left navbar. It works fine in firefox but theres a bit of a blue line on each side of the button in IE. Anyone who has both browsers know why IE isn't displaying it properly?

 

I checked it in IE and it looks fine to me Have you fixed it since you last posted? Don't want you to go 'round in circles here, but have you considered using CSS to get your buttons to "light up" ?

 

how is this done? Does it involve the onmouseover function?

 

Nope, purely CSS, so anyone disabling script will still be able to use it and get the rollover effect - for a quick example have a look at http://www.search-this.com/website_design/css_rollover_buttons.aspx - the links to the examples are near the foot of the page.

It may not be the best example but have a browse on Google for "CSS rollover buttons", experiment and have some fun with it

 

No, it's much cleaner than that with CSS. You declare different properties for a, depending on if it's the plain link, if the user is hovering over it, active, or visited.

One of my pages does it like this:

a
{
display: block;
padding: 3px;
width: 145px;
background-color: #002D8A;
border-bottom: 1px solid #D5F1FF;
}

a:link, a:visited
{
color: #FFFF33;
text-decoration: none;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}

a:hover
{
background-color: #FFFF99;
color: #002D8A;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}

Which gives it something of a button look. You can also have the background be an image if you want that look.

 

oh sweet.

that makes perfect sense. I always considered HTML very restrictive, but as I learn more each day I learn that there's much more i can do. Thanks a bunch to all of you.
oh one last question - can you decleare sub-classes? Like a .specific within the a:hover?

 

Yes your right but this is only applicable to tables use as layouts. In this case it is only an inner table.