Out of control table

ChiefTechnovelgist · #1 (**permalink**) 10-22-2003, 09:17 AM

I can't figure out how to get table cells to properly align themselves vertically on my site. If you go to a page like

http://www.technovelgy.com/ct/content.asp?Bnum=69

the left and right side columns each have two rows. The top row on each side aligns to the top (good). The second row, however, does not. The content that starts with "Press refresh if you see a generic ad" on the left side, and the google ad on the right side, should both align at the top of their respective cells, but they do not.

Help! I can't figure it out.

Graf1771 · #2 (**permalink**) 10-22-2003, 09:28 AM

These things happen all the time - i find the best way to look at the page when there is a problem is to put a border on the main table to try and see what is happening.

It looks as though the two sections are aligning to the top of the cell, but the cell above has too many
tags and a </p> tag - each one equally a line of empty space. You could try removing these tags and see what happens...

paulhiles · #3 (**permalink**) 10-22-2003, 11:01 AM

Hi ChiefTechnovelgist - great name! ;-)

There are a few things you can try to figure this one out. One definite recommendation would be to download Mozilla Firebird and install the Web Developer extension. This allows you to see at a glance all table elements or block elements, etc on your site.

I also use a similar technique to Graf1771, when troubleshooting problem tables or layers. I assign a strong primary bordercolor to the main table, say a red, and then a contrasting color for the next nested table, like a blue, and so on.. denoting smaller detailed cells with a neutral mid-grey.

My solution in this instance, would be to fix the height of the top cell in both left and right columns, using a spacer element or something similar. Also, you should remember this content is coming from the google ads link.. which is obviously out of your direct control, and I did notice they're using nested tables with a margin or padding at the top of each block ad.

Hope this helps in some way

Paul

carbonize · #4 (**permalink**) 10-22-2003, 01:03 PM

Quote:

Originally Posted by paulhiles

Hi ChiefTechnovelgist - great name! ;-)

There are a few things you can try to figure this one out. One definite recommendation would be to download Mozilla Firebird and install the Web Developer extension. This allows you to see at a glance all table elements or block elements, etc on your site.

Paul

Damn wish I'd of thought of that. j/k. Looks like the problem is that you are using tables within tables within tables which will always cause unbelievable problems. Try to minimise the number of tables you are using.

paulhiles · #5 (**permalink**) 10-22-2003, 04:19 PM

Hey, just spreading the good word to the masses, carbonize! I'm a Firebird evangelist! ;-)

Paul

ChiefTechnovelgist · #6 (**permalink**) 10-23-2003, 05:52 PM

Thanks all for your comments so far.

Out of all the great advice, I took most advantage of the idea of putting a gray background in the top cell to see what the heck was going on. Sure enough, the top cell was the culprit.

After a lot of messing around (many expletives were deleted in the creation of this website!) I redid the site navigation to both bring up the ads and put the navigation where it is easier to get at.

Take a look and tell me how I did!

Also, the insight that the Google ad takes up a lot more space than just the visible text is true.

Any more comments? This is really helping me a lot.

matauri · #7 (**permalink**) 10-23-2003, 10:23 PM

Looking better,BUT,as I am so fond of reminding the masses... background colour please?????

I wont review any other details, that is best left for the site review froum.

tikanet · #8 (**permalink**) 10-24-2003, 12:47 PM

matauri, I'm so glad there's another background-color-declaration evangelist amongst us. No style sheet or body tag is complete without it.

carbonize · #9 (**permalink**) 10-24-2003, 01:01 PM

What tikanet and matauri are trying to say is that not every browser will show the background as white by default. A good example is the linux browser Konqueror which used grey for the background colour when I last used it. So always set a background colour for the body element either using CSS or using the bgcolor attribute in the body tag it's self.

I would also like to add a quick review by saying your site is too white, it needs something to break it up a little. Maybe some borders on the tables?

ChiefTechnovelgist · #10 (**permalink**) 10-26-2003, 09:03 AM

Now that I've simplified the columns and tables, maybe I'll fool around with some column colors. Of course, I still have to improve my current content, add more content, try to figure out advertising...

Any color preferences? I'm sort of "color-challenged" - as if you couldn't tell.

SyrenSong · #11 (**permalink**) 10-26-2003, 11:10 AM

This topic might help you out in the color-scheme department: Scheming to Color A World Wide Website

There are quite a few places to check out a wide variety of color choices for your site. Some of 'em even let you see what the colors look like together before you actually use them on your site.

HTH!