Need help - ASAP

Table Formatting

[goneriding]

Good Morning:

I am working on the redesign of our company's website and I am much better at design then coding. I am having a problem with the tables on the left hand side that contain the main links for the site. As soon as I add text in the main cell, it places a gap between the buttons. I originally designed the site in photoshop, created slices then exported as html w/ images. I can provide a link if you need to view what I am having a problem with.

Thank you very much.

[JAB Creations]

With 44 posts there should be no need for me to remind you that if you have a question then you should post the code here on the forums.

Layout is properly done with div elements as tables should only be used for tabular data.

Post your code so we can help you out.

- John

[rocknbil]

Since the tables were automatically generated by a program, he/she probably doesn't have the tools to meet up to those unforgiving standards. :-\

goneriding, try to simplify the code and post it if you can, but I can guess at the issue by your straightforward description. A good trick is to set the border to 1
<table border="1">

To see where the various cells and rows break up, this will reveal the problems and possible solutions. My guess is that Photoshop has generated cells for each button slice, and you have a text area whose rowspan exceeds the physical height of the combined button cells on the left (A common problem.) This causes the cells of the buttons to spread out evenly to meet it.

To fix, you will need to set the buttons in a SINGLE cell at the left, aligning them to the top. To use the depreciated valign attribute,

<table>
<tr><td valign="top" width="200">
<img src="button1.gif"><br>
<img src="button2.gif"><br>
<img src="button3.gif">
</td>
<td>
Here be yer' text matie, arrrrr . . .
</td>
</tr>
</table>

If the break tags generate too much space, you will have to do one of the most despised things about table layout, nest a table within a table:

<table>
<tr><td valign="top" width="200">
<table width="200">
<tr><td><img src="button1.gif"></td></tr>
<tr><td><img src="button2.gif"></td></tr>
<tr><td><img src="button3.gif"></td></tr>
</table>
</td>
<td>
Here be yer' text matie, arrrrr . . .
</td>
</tr>
</table>

While it's true tables are deprecated for layout, as is the valign attribute, and nested tables are worse yet, it is still supported by the browsers and you will get it fixed . . . today.

[goneriding]

rocknbil: that is exactly it - thanks for the reminder, it has been a while since I have built a website from scratch.

Jab: I wasn't sure if I could post the code. Thanks.