HTML tricky layout filter

April 4, 2006 4:30 AM

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

posted by jwhittlestone to computers & internet (7 comments total)

webmasterworld is a popular forum with lots to search through.
posted by MetaMonkey at 4:59 AM on April 4, 2006

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.
posted by twistedonion at 5:41 AM on April 4, 2006

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.
posted by kirkaracha at 6:31 AM on April 4, 2006

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
posted by twistedonion at 6:37 AM on April 4, 2006

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.
posted by misterbrandt at 6:40 AM on April 4, 2006

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.
posted by dvdgee at 8:27 AM on April 4, 2006

thanks to all, found problem, restructured the table so that the content cells (nav, main content, and right area) where on the same row..
posted by jwhittlestone at 3:33 AM on April 5, 2006