Comments on: HTML tricky layout filter

Question: HTML tricky layout filter

jwhittlestone — Tue, 04 Apr 2006 04:30:11 -0800

HTML tricky layout filter: The page I'm developing is doing some unsuspected things: what good advanced HTML forums do you use?

I need some HTML help, do you know of any good online HTML forums? I went to webdeveloper.com and it seemed to be a bit simplistic.

One of the table cells on another row is extending when I add a certain amount of content. See http://vhost1.cashcade.co.uk/~barbary/jon/articles5.php

Notice the cell with the small round icon of the moustached top-hat man on the left has extended so it appears just red.

this is driving me nuts and i've turned to forums for help!

heaps of help in advance for any light shed.

cheers

jon

By: MetaMonkey

MetaMonkey — Tue, 04 Apr 2006 04:59:45 -0800

webmasterworld is a popular forum with lots to search through.

By: twistedonion

twistedonion — Tue, 04 Apr 2006 05:41:39 -0800

Have you tried defining a height to the td cells? Try making them te same height as the graphics they contain. also - I'd be careful with the spaces in your html. They can (though I don't know why) cause issues.

eg:
----------------------------------------
[td]
[img src=' height=' width='][/td]
---------------------------------------

might be better just as:
----------------------------------------
[td][img src=' height=' width='][/td]
----------------------------------------

Don't ask me why, but it's happened to me a few times. Removing any spaces solved the problem.

Your layout is probably uneccesarily complex through the use of lots of rowspans and colspans. If any of them are out it may explain the issue.

By: kirkaracha

kirkaracha — Tue, 04 Apr 2006 06:31:46 -0800

First, validate your HTML and CSS. There are lots of errors in the HTML; most of them are minor (like images without alt tags), but there are some that are related to tables, which is probably causing layout problems.

Also, you might want to consider a simple CSS layout instead of using tables.

By: twistedonion

twistedonion — Tue, 04 Apr 2006 06:37:10 -0800

ok, I was able to fix it. Define the height values of the tds to correspond the images. so [td height='77'][img src=' height='77'][/td]

That should do the trick

By: misterbrandt

misterbrandt — Tue, 04 Apr 2006 06:40:58 -0800

If I understand your problem, set the top-hat image to be display:block, and that will allow the bottom of its cell to pull up tight to the image.

[td][img style='display:block'][/td]

If not a simple CSS-based layout, you can at least dramatically simplify your table so it is just a wireframe for your header, footer and columns, and then fill those with content.

By: dvdgee

dvdgee — Tue, 04 Apr 2006 08:27:34 -0800

any forum with members of any expertise would probably flame you for using tables on a page with no tabular data. learn some basic css layouts, alistapart.com is a good place to start, and then subscribe to css-discuss, a very high volume list but a good place to go when you have a problem.

By: jwhittlestone

jwhittlestone — Wed, 05 Apr 2006 03:33:07 -0800

thanks to all, found problem, restructured the table so that the content cells (nav, main content, and right area) where on the same row..