Alignment in tables

Problem with logo and navigation

[Tricky_9999]

Hi All

I'm having a problem with trying to align a logo and navigation bar in a table. Apologies if I'm asking this question in the wrong part of the forum, but I've tried searches on the subject and haven't managed to find anything that works.

The site itself is a horrendous hotch potch of nested tables, and I know that long term we're going to have to start from scratch and use CSS for positioning instead of tables, but in the meantime I've managed to validate in 4.01 transitional and am now almost there in validating in 4.01 strict (we need to meet a certain standard to stop any legal repercussions - and because we want to of course!).

My problem is that I've taken a lot of formatting out of the html and this has made my logo and nav bar centre vertically in its cell on pages where there is a lot of text in the main content area. The relevant code is as follows (forgive the lack of description in my class names - I am quite new to all this!):

<table class="bordercolor"><tr class="otherbackground"><td>
<table class="palegreenbackground">
<tr><td>
<table class="greenbackground" cellpadding="1" cellspacing="0" border="0">
<tr><td>
<table class="100percent" cellpadding="0" cellspacing="0" border="0"><tr>
<td> <a href="../index.htm"><img class="imgmargin2" src="../images/cellogo1.jpg" width="168" height="118" alt="CEL Logo"></a></td>
</tr>
</table>
</td></tr>

As you can see, there are far too many tables, but to be honest, I'm still not very experienced in writing code, and it hurts my head to try and understand where one table starts and another one ends! Suffice to say though, that if anyone can help me vertically align the logo to the top of the data cell, then this will help with the navigation bar problem too.

Hope you can help - many thanks in advance!

Tony

[tomda]

Hi,

Indeed too many nested table!

To vertically align a content in a cell (in HTML) use valign
<td valign=bottom¦middle¦top></td>

ALso, it is hard to check at your code before we do not have access to your style sheet and image (does your table have borders, cellpadding, cellspacing?)... But I am wondering why 3 nested table for one picture?

Tommy

[natty]

sounds like you could do with a gui editor to help you with the tables..
i tend to use textpad for the raw html, but if i have a difficult table to mess with i fire up DW and make it in that..
its also very easy to merge away cell that are not needed too.
much easier for tables imo.
just my 2p

[Tricky_9999]

Hi Tommy

Thanks for the response and sorry about the confusing post. To help you visualise how the site has been (badly!) designed, I've put the url in my user profile. You will see (if you can view it) that there are only about six or seven defined styles in the SS. I've tried to fix this on the local version which I haven't uploaded yet, and most of the deprecated html has now been replaced by new styles in the SS.

I think I put too much code up on my earlier post - the three tables include one that forms the outer border of the page content, one that forms the footer, and one for the cell where the logo is positioned. On pages where there is a lot of text, the left side (where the logo and nav bar are positioned) sits in two data cells that stretch when the main content spans for several paragraphs. This is the part that I can't stop from being vertically centred. I can't use valign as it won't validate in html 4.01 strict, so my original question should have made it clear that I'm looking for a CSS alternative that will validate.

Hope this makes it clearer!

Tony

[Tricky_9999]

Thanks Natty - I do use DreamWeaver as well as an html editor, but I find that even though it professes to be WYSIWIG, its nothing of the kind. In DW, the image is set to align top, but it doesn't actually render in any of the browsers I've tested it on. Its driving me mad!