HTML - Table Layout

I designed a page using tables with background images to create borders around photos. Click here to view the page. The page renders correctly in Firefox, but does not in IE7. The lower right hand corner border of the photo in the 2nd and the 4th testimonials is off track for some reason. I double checked all of my widths and they are consistent. Can someone please tell me what I'm missing. Thanks in advance for your help!

Im creating a site using a table based layout.
I have one table and many different cells. I also have a lot of different content. The problem I'm having is when I put a picture inside a cell, it screws up the entire layout. It doesn't stay "still", it just affects all the other cells.

I always have this problem, yet can't find a solution.

Hi Guy's,

First time poster and newbie designer.

I am trying to put a three column template together for a content site, I want to have the text in the middle, nav on the left and adsense on the right hand column.

Problem is that I simply can't get the elements to align correctly, when I add the text, the images on the left and right are pushed down to the middle of the left and right columns and if I push up the left image using text and white space it pushes the text in the middle column out of alignment!!!

It's incredibly frustrating and I have tried lots of alignment settings to get it to work but I can't and I am sure I am just missing some real basic things.

Please can you look at the page and help me to find what I am doing wrong

http://www.blueballoonshopping.info/3colprob.html

Thanks

I have a template that is being used for a forum and the tables are not working out and everything looks distorted.

PHP Code:
<script language="JavaScript" src="modules/Forums/bbcode_box/add_bbcode.js" type="text/javascript"></script>



<table border="0" cellpadding="3" cellspacing="1" width="100%" class="forumline">



    <!-- BEGIN switch_username_select -->

    <tr> 

        <td class="row1"><span class="gen"><b>{L_USERNAME}</b></span></td>

        <td class="row2"><span class="genmed"><input type="text" class="post" tabindex="1" name="username" size="25" maxlength="25" value="{USERNAME}" /></span></td>

    </tr>

    <!-- END switch_username_select -->

    <!-- BEGIN switch_privmsg -->

    <tr> 

        <td class="row1"><span class="gen"><b>{L_USERNAME}</b></span></td>

        <td class="row2"><span class="genmed"><input type="text"  class="post" name="username" maxlength="25" size="25" tabindex="1" value="{USERNAME}" /> <input type="submit" name="usersubmit" value="{L_FIND_USERNAME}" class="liteoption" onclick="window.open('{U_SEARCH_USER}', '_phpbbsearch', 'HEIGHT=250,resizable=yes,WIDTH=400');return false;" /></span></td>

    </tr>

    <!-- END switch_privmsg -->

    <tr> 

      <td class="row1" width="22%"><span class="gen"><b>{L_SUBJECT}</b></span></td>

      <td class="row2" width="78%"> <span class="gen"> 

        <input type="text" name="subject" size="45" maxlength="60" style="width:450px" tabindex="2" class="post" value="{SUBJECT}" />

        </span> </td>

    </tr>

    <tr> 

      <td class="row1" valign="top"> 

        <table width="100%" border="0" cellspacing="0" cellpadding="1">

          <tr> 

            <td><span class="gen"><b>{L_MESSAGE_BODY}</b></span> </td>

          </tr>

          <tr> 

            <td valign="middle" align="center"> <br />

              <table width="100" border="0" cellspacing="0" cellpadding="5">

                <tr align="center"> 

                  <td colspan="{S_SMILIES_COLSPAN}" class="gensmall"><b>{L_EMOTICONS}</b></td>

                </tr>

                <!-- BEGIN smilies_row -->

                <tr align="center" valign="middle"> 

                  <!-- BEGIN smilies_col -->

                  <td><img src="{smilies_row.smilies_col.SMILEY_IMG}" border="0" onmouseover="this.style.cursor='hand';" onclick="emoticon('{smilies_row.smilies_col.SMILEY_CODE}');" alt="{smilies_row.smilies_col.SMILEY_DESC}" title="{smilies_row.smilies_col.SMILEY_DESC}" /></a></td><!-- END smilies_col -->

                </tr>

                <!-- END smilies_row -->

                <!-- BEGIN switch_smilies_extra -->

                <tr align="center"> 

                  <td colspan="{S_SMILIES_COLSPAN}"><span  class="nav"><a href="{U_MORE_SMILIES}" onclick="window.open('{U_MORE_SMILIES}', '_phpbbsmilies', 'HEIGHT=300,resizable=yes,scrollbars=yes,WIDTH=250');return false;" target="_phpbbsmilies" class="nav">{L_MORE_SMILIES}</a></span></td>

                </tr>

                <!-- END switch_smilies_extra -->

              </table>

            </td>

          </tr>

        </table>

      </td>

      <td class="row2" valign="top"><span class="gen"> <span class="genmed"> </span> 

        <table width="450" border="0" cellspacing="0" cellpadding="2">

          <tr align="right" valign="middle">
            <td>
              <p dir="rtl" style="margin-top: 0; margin-bottom: 0" align="left"><span class="gen"> 
              <span class="genmed"> 
               <span lang="ar-sy"> </span></span></span></span><p dir="rtl" style="margin-top: 0; margin-bottom: 0">
              <span class="genmed"><span style="font-size: 5pt"> </span></span></td>
          </tr>
          <span class="gen"> 
          <tr> 
            <td width="100%"> 
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr> 
                        <td> 
                          <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
                                <tr> 
                                  <td>
                                  <p dir="ltr" align="left"><span class="gen">  
              <span class="genmed"> 
                                  <span lang="ar-sy"> </span></span></span></td> 
                                </tr> 
                                <tr> 
                                  <td dir="rtl">
                                  <p align="right" dir="rtl" style="margin-top: 0; margin-bottom: 0">
                                  <span style="font-size: 5pt"> </span><p align="left" dir="ltr" style="margin-top: 0; margin-bottom: 0"><span class="gen"> 
              <span class="genmed"> 
                       </span></td> 
                                </tr> 
                          </table> 
                        </td> 
                  </tr> 

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

              </table>

            </td>

          </tr>

          <tr> 

            <td colspan="9"> <span class="gensmall"> 

              <input type="text" name="helpbox" size="45" maxlength="100" style="width:450px; font-size:10px" class="helpline" value="{L_STYLES_TIP}" />

              </span></td>

          </tr>
           <!-- Canned MOD Begin -->
          <tr>
            <td colspan="9">{S_CANNED_SELECT}</td>
          </tr>
          <!-- Canned MOD End -->

          <tr> 

            <td colspan="9"><span class="gen"> 

              <textarea name="message" rows="15" cols="35" wrap="virtual" style="width:450px" tabindex="3" class="post" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);">{MESSAGE}</textarea>

              </span></td>

          </tr>

        </table>

        </span></td>

    </tr>

    <tr> 

      <td class="row1" valign="top"><span class="gen"><b>{L_OPTIONS}</b></span><br /><span class="gensmall">{HTML_STATUS}<br />{BBCODE_STATUS}<br />{SMILIES_STATUS}</span></td>

      <td class="row2"><span class="gen"> </span> 

        <table cellspacing="0" cellpadding="1" border="0">

          <!-- BEGIN switch_html_checkbox -->

          <tr> 

            <td> 

              <input type="checkbox" name="disable_html" {S_HTML_CHECKED} />

            </td>

            <td><span class="gen">{L_DISABLE_HTML}</span></td>

          </tr>

          <!-- END switch_html_checkbox -->

          <!-- BEGIN switch_bbcode_checkbox -->

          <tr> 

            <td> 

              <input type="checkbox" name="disable_bbcode" {S_BBCODE_CHECKED} />

            </td>

            <td><span class="gen">{L_DISABLE_BBCODE}</span></td>

          </tr>

          <!-- END switch_bbcode_checkbox -->

          <!-- BEGIN switch_smilies_checkbox -->

          <tr> 

            <td> 

              <input type="checkbox" name="disable_smilies" {S_SMILIES_CHECKED} />

            </td>

            <td><span class="gen">{L_DISABLE_SMILIES}</span></td>

          </tr>

          <!-- END switch_smilies_checkbox -->

          <!-- BEGIN switch_signature_checkbox -->

          <tr> 

            <td> 

              <input type="checkbox" name="attach_sig" {S_SIGNATURE_CHECKED} />

            </td>

            <td><span class="gen">{L_ATTACH_SIGNATURE}</span></td>

          </tr>

          <!-- END switch_signature_checkbox -->

          <!-- BEGIN switch_notify_checkbox -->

          <tr> 

            <td> 

              <input type="checkbox" name="notify" {S_NOTIFY_CHECKED} />

            </td>

            <td><span class="gen">{L_NOTIFY_ON_REPLY}</span></td>

          </tr>

          <!-- END switch_notify_checkbox -->

          <!-- BEGIN switch_delete_checkbox -->

          <tr> 

            <td> 

              <input type="checkbox" name="delete" />

            </td>

            <td><span class="gen">{L_DELETE_POST}</span></td>

          </tr>

          <!-- END switch_delete_checkbox -->
           <!-- BEGIN switch_lock_topic -->
          <tr> 
            <td> 
              <input type="checkbox" name="lock" {S_LOCK_CHECKED} />
            </td>
            <td><span class="gen">{L_LOCK_TOPIC}</span></td>
          </tr>
          <!-- END switch_lock_topic -->
          <!-- BEGIN switch_unlock_topic -->
          <tr> 
            <td> 
              <input type="checkbox" name="unlock" {S_UNLOCK_CHECKED} />
            </td>
            <td><span class="gen">{L_UNLOCK_TOPIC}</span></td>
          </tr>
          <!-- END switch_unlock_topic -->

          <!-- BEGIN switch_type_toggle -->

          <tr> 

            <td></td>

            <td><span class="gen">{S_TYPE_TOGGLE}</span></td>

          </tr>

          <!-- END switch_type_toggle -->

        </table>

      </td>

    </tr>

    {ATTACHBOX}{POLLBOX} 

    <tr> 

      <td class="catBottom" colspan="2" align="center" height="28"> {S_HIDDEN_FORM_FIELDS}<input type="submit" tabindex="5" name="preview" class="mainoption" value="{L_PREVIEW}" /> <input type="submit" accesskey="s" tabindex="6" name="post" class="mainoption" value="{L_SUBMIT}" /></td>

    </tr>

  </table>



  <table width="100%" cellspacing="2" border="0" align="center" cellpadding="2">

    <tr> 

      <td align="right" valign="top"><span class="gensmall">{S_TIMEZONE}</span></td>

    </tr>

  </table>

</form>



<table width="100%" cellspacing="2" border="0" align="center">

  <tr> 

    <td valign="top" align="right">{JUMPBOX}</td>

  </tr>

</table>



{TOPIC_REVIEW_BOX} 



Could somebody take a look at that and see what I'm missing or need to add.

Thanks

This is pretty basic, i am trying to make a layout using tables to include a header, nav bar, left, main and right columns(tables) and a footer, so far i have this(below), the header and nav bar work ok, after that the tables align to the left out of postion with the header etc, how do i get the left table to be flush with the header and nav bar tables and then the middle table and right tables(cols) to be in the right place??... any help here....?

HTML Code:

<table width = "80%" border = "1" align = "center">

<tr>
<td> Header </td>
</tr>

<table width = "80%" border = "1" align = "center">
<tr>
<td> Nav bar</td>
</tr>
</table>

<!--  i can't get this table to be flush with the header and nav bar tables -->

<table width = "20%" border = "1" align = "left">
<tr>
<td> Left col </td>
</tr>
</table>

</table>

This is what i am trying to achieve,