(First let me say that I'm a web design newbie)

So I have this premium template that I'm customizing, and I'm trying to add a simple text-link, navigational menu to the left side.

Problem...
After adding more than 5 (returned) lines of type, the sliced image repeats and throws the entire site off. Is there a way to add a table of text over multiple sliced gifs so that it doesn't repeat? Let me just show you the problem, and you'll understand what I'm trying to do, and hopefully be able to offer advice.

Screenshot:


Here's the HTML:

<table width="780" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr valign="top">
    <td width="200" background="images/left-bg.gif"> 
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr valign="top"> 
          <td colspan="2"><IMG SRC="images/pc15.gif" WIDTH=201 HEIGHT=35 ALT=""></td>
        </tr>
        <tr valign="top"> 
          <td width="12" background="images/pc49.gif"><img src="images/inside_19.gif" width="12" height="289"></td>
          <td width="190"><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr> 
                <td><img src="images/inside_20.gif" width="189" height="71"></td>
              </tr>
              <tr> 
                <td height="98" background="images/inside_22.gif"><table width="84%" border="0" align="center" cellpadding="0" cellspacing="0">
                    <tr> 
                      <td valign="top" class="text"><p>Line 1</p>
                      <p>Line 2</p>
                      <p>Line 3</p>
                      <p>Line 4</p>
                      <p>Line 5     </p></td>
                    </tr>
                  </table></td>
              </tr>
              <tr> 
                <td><img src="images/inside_23.gif" width="189" height="23"></td>
              </tr>
              <tr> 
                <td height="76" valign="top" background="images/inside_24.gif"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
                    <tr> 
                      <td><div align="center" class="text"><strong></strong></div></td>
                    </tr>
                  </table></td>
              </tr>
              <tr> 
                <td>&nbsp;</td>
              </tr>
            </table></td>
        </tr>

Also note, that I don't want to change the PSD slicing in Photoshop, if I dont have to. Go easy on me guys.... I'm a newbie (but a quick learner).

This is because the links are stretching the table height and the background image is only so tall, so it repeats. There is a couple things you can do. One is to stop the background image from repeating using CSS like this:
style="background-repeat:no-repeat;

in this section:
<td height="98" background="images/inside_22.gif" style="background-repeat:no-repeat;"><table width="84%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" class="text"><p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>
<p>Line 4</p>
<p>Line 5 </p></td>
</tr>

The other is to use line breaks rather then paragraphs like this:
Change

<p>Line 2</p>
<p>Line 3</p>
<p>Line 4</p>
<p>Line 5</p>

To:

<br>Line 2
<br>Line 2
<br>Line 4
<br>Line 5

I hope this helps.
Also phillyhotshots, you must be from Philadelphia. Am I right?
I live just outsite of west philly (the suburbs).

When designing a website, you should always think or even put in the text your going to involve into it. For example your menu, if you had designed it knowing what you were going to have in it, then you might not have this problem.

Good point Twitch. He should do this, however the problem will probably worsen. Most anchor text is longer than 6 characters (eg. text 1, text 2...). It will begin to wrap and even widen the table.

Originally Posted by Twitch

When designing a website, you should always think or even put in the text your going to involve into it. For example your menu, if you had designed it knowing what you were going to have in it, then you might not have this problem.

Thanks, I will keep that in mind Twitch. Although this time, as mentioned above, I am customizing a premium template... someone else designed it, and I'm just adding content.

Originally Posted by kline11

This is because the links are stretching the table height and the background image is only so tall, so it repeats

kline11, I am from Philly (I live in Manayunk and work in the city), so I guess we are neighbors. I took all of your advice, used the css no repeat trick, used <br> instead of <p> and, although the image doesn't repeat... now there is a white space. See new screenshot below:



Here's what I changed the code to, using your example:

<table width="780" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr valign="top">
    <td width="200" background="images/left-bg.gif"> 
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr valign="top"> 
          <td colspan="2"><IMG SRC="images/pc15.gif" WIDTH=201 HEIGHT=35 ALT=""></td>
        </tr>
        <tr valign="top"> 
          <td width="12" background="images/pc49.gif"><img src="images/inside_19.gif" width="12" height="289"></td>
          <td width="190"><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr> 
                <td><img src="images/inside_20.gif" width="189" height="71"></td>
              </tr>
              <tr> 
                <td height="98" background="images/inside_22.gif" style="background-repeat:no-repeat;"><table width="84%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr> 
<td valign="top" class="text">Line 1<br><br>Line 2<br><br>Line 3<br><br>Line 4<br><br>Line 5</td>
</tr>

                  </table></td>
              </tr>

Thanks for all of your help, greatly appreciated!!

One thing . . . you could have acheived this much easier using CSS and ditching the tables altogether. May be next time

I don't use tables at all now (unless I need them for tabular data). Sites load quicker, look nicer and degrade in older browsers and devices perfectly!

Originally Posted by gavinf

One thing . . . you could have acheived this much easier using CSS and ditching the tables altogether. May be next time

Thanks for the info, but again... This is a Premium Template which was purchased... I did NOT create this. Can anyone please help, I am still trying to get rid of the white space around the 5th line.

Thanks In Advance.