floating expandable text boxes --- problem with rollover background color

[tchopshop]

Hello. I'm new at this and trying to do CSS without tables... I'm banging my head against a problem that involves trying to get the background to change color on a rollover for four columns of text in a floated bar (the columns are little paragraphs with headers set in definition lists). I want to have the rollover cover the entire box... But the boxes can't be fixed vertically because they need to expand somewhat with varying amounts of text. You can see the problem at the bottom of this page:

http://www.tchopshop.com/theonlinetherapist/index.html

I want the rollover background to go to the top and bottom of the blue bar, regardless of the size of the text inside the column.

thank you for any help!
Elena

[mwinter]

I'm new at this and trying to do CSS without tables...

There's nothing wrong with using tables when they are appropriate. A table is probably more appropriate than your current markup (using table cell headers instead of definition terms), though heading elements and paragraphs would be better still. You aren't defining terms, but rather using a term as a heading for some text to follow it, therefore a definition list isn't appropriate.

But the boxes can't be fixed vertically because they need to expand somewhat with varying amounts of text.

Certainly, using pixel lengths will not afford you any success, but they shouldn't be used when defining dimensions relative to text, anyway. If you use em lengths, the blocks of text should remain at a sufficient size to avoid overflow as both the computed (actual) width and height will be relative to the font size.

If that won't help, I should think you'll either have to live with what you have, or give it up. Block-level elements are only as tall as they need to be, and unless you can set an explicit height somewhere appropriate (and you cannot), a percentage height cannot be used.

http://www.tchopshop.com/theonlinetherapist/index.html

On an unrelated note, don't use 'click here' for link text.

Good luck,
Mike

[tchopshop]

Thanks, mwinter, for the advice

I switched the design so that the rollovers don't change the background cell,

www.tchopshop.com/theonlinetherapist/test.html

and I think it's behaving better, although I haven't tested it on many browsers yet.

Regarding what you are talking about -- would you mix CSS on the top of the page with a table layout for the bottom... or are you saying do the whole page in tables?

I actually built it in tables first and decided I wanted to practice, seeing as it was such a "simple site".

...btw, the click here is the client's request...

[mwinter]

Regarding what you are talking about -- would you mix CSS on the top of the page with a table layout for the bottom... or are you saying do the whole page in tables?

If I were to use tables, it would only be to replace your definition list. However, it's unlikely that I would; I'd probably use headings and paragraphs, instead, and drop the rollover.

Mike