Sidebar Cells Stretch With Main Content Cell, how to stop this?

[jellotime91]

Hi, I'm a little new to HTML, well not new, but rusty.

I completed a website for a client, and now a few weeks later she says that when adding content all of the cells stretch along with the center cell which holds the content, and it severely malforms the layout. I had done my testing of the layout in Google Chrome, and it looked perfect regardless of the content, but in Firefox and Internet Explorer it looks awful!

I have tried defining pixel heights for each individual cell to exactly what they are supposed to be, however this apparently does not mean anything to IE and Firefox.

The code is very long for this page but essentially it's just a regular table which I sliced in Photoshop. I have made plenty of layouts like this before and never had this problem be so persistent. Please offer any help that you can, and thank you to advance to anyone who can help. :)

OK I was not aware that screen captures were not allowed, well, you can check out the website here <snip>

If you have firefox and chrome try looking at it in chrome, it renders fine in chrome, but in firefox/ie it doesnt. Thanks in advance again.

[edited by: tedster at 2:05 am (utc) on Mar 2, 2010]

[edited by: bill at 4:58 am (utc) on Mar 2, 2010]
[edit reason] No screen captures or links to your sites. Please review the TOS. [/edit]

[webeno]

well, as screen captures and links are not allowed, the only thing i can do is to give you a piece of advice: try not using tables but go with divs (spans) instead and define the location of the elements in css with float and position properties.

if you need more help, you can contact me through my blog or just place the code (or part of the code) in here.

[kaled]

Without seeing the code I can only hazard a guess, however...

In the first row, specify the width of each cell. For minimum width columns use 1% and for maximum width columns use 100%. You would think that the width values for a row should add up to 100% but when I've done this it doesn't seem to matter. You may need to use &nbsp; for spaces or use CSS to prevent line-breaks being inserted.

The <td width> attribute is deprecated in favour of CSS however I've never tried that.

Kaled.

[tangor]

Trying to apply height to table cells is iffy, though cell width works perfectly.

If using percents in tables you'll have to take into consideration all the screen resolutions and user preferences of full screen, half screen, or any other size window in between... thus dynamic resizing of a table can break picture layouts. To avoid that settle on a fixed width table with pixel sized cells. This won't break.