Forum Moderators: open
I'm having a problem getting text for a left menu to align to the top of a table cell on left side of the page. I'm using valign="top" in the td tag. I've used the same code on several pages on the site and only those pages that are very short does the text align to the top. On very long pages the text gets progressively farther down. But let me explain as this table arrangement may be at fault.
In order to get text of main body cell to show up first in search engines I'm using a single pixel gif in first table cell on left and then another td cell for the main body of the page to the right of that (this is the 2nd colum of first row and has a td cell with rowspan="2" in it). Then I start another row where I place the menu text on left side. This works on all short pages, as said above, but long pages the menu does not rise to the top.
here is the code I'm using:
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr><td width="20%">
<img src="images/spacer.gif">
</td><td align="center" width="80%" rowspan="2" valign="top">
Logo and Main Body of Text goes here
</td></tr><tr><td width="20%" valign="top">
Left menu goes here
</td></tr><tr><td colspan="2">
footer goes here
</td></tr></table>
Any suggestions?
It's a problem with the table.
You have 1 row that is made up of the gif and the main body content.
You then start a new row with the left hand menu in it.
That second row will always have to be below the main content. So the longer the content the further the left hand menu will be from the top of the page.
When doing tables it is always a good idea to put border="1", this way you can see exactly what is happening, once it works as expected take the border off. If you do this with your example you will see that the lefthand menu text is at the top of it's <td> but the way you have the <tr>'s will mean it will not be at the top of the page.
If you were to get rid of the gif and put the lefthand menu in it's palce it will work as you wanted.
Why are you using the gif, you mention for search engine's sake, I don't think I have ever heard of that before. Does anyone else know about that?
Have you thought of using CSS-P for the table? That's very search engine friendly.
Good luck
Why are you using the gif, you mention for search engine's sake, I don't think I have ever heard of that before. Does anyone else know about that?
Some search engines pick up the first text they see and use that for the description, i.e., often the menu in first td. This table arrangement solves that problem and now the search engines pick up the main body of the page. That is why I'm using this arrangement. If I put the menu in the first td then I defeat my purpose. It seems to me that data in a table cell with valign="top" should bring data to the top of that cell regardless of what's in the next td. There must be a way to fix this.
Thanks for trying to help.
try this:
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr><td width="20%">
<img src="images/spacer.gif" width="1" height="1" border="0" alt="">
</td><td align="center" width="80%" rowspan="2" valign="top">
Logo and Main Body of Text goes here
</td></tr><tr><td width="20%" valign="top">
Left menu goes here
</td></tr><tr><td colspan="2">
footer goes here
</td></tr></table>
On another note IMHO that the search engine's reading the first text is in the myth category. The spider reads the page and picks out what it's programmed to - relevant text to the search phrase.
You have not set a width & height for your pixel so when your text is long the two cells on the menu side want to be the same height.
Actually, I had the height and width in the image tag, I just took that extra data out to post this table diagram. Sorry for the confusion.
On another note IMHO that the search engine's reading the first text is in the myth category. The spider reads the page and picks out what it's programmed to - relevant text to the search phrase.
Search engines usually pick out the first 200 characters on the page and they read the table cells left to right and going down the page according to table cells. If you have a large menu on left side of the page then the main headers/text never appears in the summary for the search.
I have tested this and it works. Perviously a site would have the menu links listed where the site description should go and after setting up this table then the first text on the page shows up, i.e., the text in the header and first line or two of text in first paragraph.
If you do a search in Google and click on the link for more pages from this site it actually brings up the site:www.domain.com results and this is where this method is most effective in Google.
If you test your site in Google with the site:www.domain.com command and you don't like the results try this table arrangement and it should pick up main body contents instead.
We seem to have different experiences with what the SE (particularly google) are reading and displaying. Which is fine.
In my case when I search for the main key phrase or search terms my site comes up with many different phrases displayed from anywhere in the main text body. It will come up with different text depending on the search phase - it's not consistent.
Correct and I have the same experience when using the regular search in Google. However is you use site search (or click on links to othe pages on the same site) like I suggested or use other search engines that don't pick the keyword out of the text then you get different results--the new MSN engine for instance.
This table eliminates those problems in my experience and allows the designer to designate what will come up first in search results
Anyway, I assuming with the attributes in, you are still experiencing the problem - yes? What browser? Where I am right now I only have an old Mac with IE 5 and when I test it for a long text body the two left hand cells are different heights and the main text is at the top of the right hand cell.
I also have a Mac - a G3 using IE 5.2. But the same result appears in FireFox 0.9.3 --left menu is 3-4 inches lower than it should be when loading a long page.
The title of this thread is kind of a red herring - the issue is not that the text will not align to the top of the cell (just add border=1 and you'll see this). Rather the issue is that the browser is assigning too much height to the TOP cell. When a page gets to a certain height, the rendering engine splits the extra available horizontal space between the two cells.
The essense of a fix is to find some way to create invisible "bottom fill" for the menu cell. That way, the browser can't assign too much space to the top, empty cell -- And that is what a browser will do if you don't stuff the menu cell chock full of content from top to bottom. I've seen this fill created with either a spacer.gif, or lines of
If you can afford to do that by hand for each page, it's a kind of fix - kludgy but it works. If you can't afford to be hands-on with each page, then you need to use javascript to take the height of the content cell in pixels, and then use that number to calculate either how many rows of you need at the bottom of the menu cell, or calculate what the height of a spacer.gif fill should be, again below the actual menu.
Very nasty stuff, that - and javascript support can still be dicey on Mac browsers and even Opera. And who knows what a handheld browser would do!
The important thing for me is that with today's browsers there are CSS-P approaches to get your content to the top of your HTML document, if that's what your goal is.
The important thing for me is that with today's browsers there are CSS-P approaches to get your content to the top of your HTML document, if that's what your goal is.
Thanks much! I put the following code in the css file
.vertaligntop { vertical-align:top;
margin-top:0;
}
and surrounded the menu with a div class="vertaligntop" and it brought it almost to the top of the page with the page with the most text where it was about 4 inches lower.
thanks,
