Skip navigation
Currently Being Moderated

Table column uneven shift-needing advice

Apr 7, 2013 1:27 PM

Tags: #html #css #layout #dw

Hello all!

 

I am having an issue with a table column that shifts unevenly to the top when viewing from FireFox. I noticed that this occured as soon as I added divs for my text headers.

I read a lot of posts relating to the issue and learned that merging and/or splitting cells is a malpractice, which I have done prior to my findings.

 

In my attempts at resolving the problem, I have deleted all height values and now I'm faced with a couple of options: Either I create CSS rules for setting table properties or I recreate cells that will have nested tables in them that would act independently? Is this correct?

 

Could you please tell me what the best course of action is?

 

Your advice will be muchly appreciated!!!

Thank you.

 

Da CODE:

 

 

<table width="800" height="1000" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td width="302"><table width="302" border="0" valign="center" align="center" cellpadding="0" cellspacing="0">
      <tr width="302">
        <td width="302" colspan="3" align="center" valign="middle" border="0" cellspacing="0" cellpadding="0"><img src="Images/About_original_01.jpg" width="302" height="501" hspace="0" vspace="0" border="0" align="middle" valign="center"></td>
      </tr>
      <tr width="302">
        <td width="105" border="0" cellspacing="0" cellpadding="0"><img src="Images/About_original_08.jpg" width="105" height="53" hspace="0" vspace="0" border="0" align="middle" valign="center"></td>
        <td width="75" border="0" cellspacing="0" cellpadding="0"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','Images/About_original_09.jpg',1)"><img src="Images/About_original_resume_OR_09.jpg" name="Image3" width="75" height="53" hspace="0" vspace="0" border="0" valign="center" align="middle"></a></td>
        <td width="122" border="0" cellspacing="0" cellpadding="0"><img src="Images/About_original_10.jpg" width="122" height="53" hspace="0" vspace="0" border="0" align="middle" valign="center"></td>
      </tr>
      <tr align="center" valign="middle" width="302" border="0" cellspacing="0" cellpadding="0">
        <td width="302" colspan="3" border="0" cellspacing="0" cellpadding="0"><img src="Images/About_original_11.jpg" width="302" height="446" hspace="0" vspace="0" border="0" align="middle" valign="center"></td>
      </tr>
    </table></td>
    <td width="498" border="0" cellspacing="0" cellpadding="0" valign="middle" align="center"><table width="498" height="1000" border="0" cellspacing="0" cellpadding="0" align="center" valign="center">
      <tr align="center" valign="middle" border="0" cellspacing="0" cellpadding="0">
        <td width="498" colspan="4" border="0" cellspacing="0" cellpadding="0"><img src="Images/About_original_02.jpg" width="498" height="19" hspace="0" vspace="0" border="0" align="middle" valign="center"></td>
      </tr>
      <tr border="0" cellspacing="0" cellpadding="0" valign="center">
        <td width="158" align="center" valign="middle" border="0" cellspacing="0" cellpadding="0"><img src="Images/About_original_03.jpg" width="158" height="67" hspace="0" vspace="0" border="0" align="middle" valign="center"></td>
        <td width="65"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','Images/About_original_rollover_04.jpg',1)"><img src="Images/About_original_04.jpg" name="Image8" width="65" height="67" hspace="0" vspace="0" border="0" valign="center" align="middle"></a></td>
        <td width="167" border="0" cellspacing="0" cellpadding="0" valign="center"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image11','','Images/About_original_rollover_05.jpg',1)"><img src="Images/About_original_05.jpg" name="Image11" width="167" height="67" hspace="0" valign="center" vspace="0" border="0" align="middle"></a></td>
        <td width="108" border="0" cellspacing="0" cellpadding="0" valign="center"><img src="Images/About_original_06.jpg" width="108" height="67" hspace="0" vspace="0" border="0" align="middle" valign="center"></td>
      </tr>
      <tr align="center" valign="middle" border="0" cellspacing="0" cellpadding="0">
        <td width="498" colspan="4" border="0" cellspacing="0" cellpadding="0"><div class="aboutimagecontainer"><img src="Images/About_original_07.jpg" width="498" height="914" hspace="0" valign="center" vspace="0" align="middle" border="0"> 
        <p class="aboutheader"> Here is my story </p>
         <p class="aboutsubheader"> in short </p>
        </div>
          </td>
      </tr>
    </table></td>
  </tr>
</table>

</body>
</html>




 
Replies
  • Currently Being Moderated
    Apr 7, 2013 1:52 PM   in reply to OOlala_28

    OOlala_28 wrote:

     

     

    I read a lot of posts relating to the issue and learned that merging and/or splitting cells is a malpractice, which I have done prior to my findings.

     

     

    Yes thats a bad way to construct a webpage.

     

     

    OOlala_28 wrote:

     

     

    In my attempts at resolving the problem, I have deleted all height values and now I'm faced with a couple of options: Either I create CSS rules for setting table properties or I recreate cells that will have nested tables in them that would act independently? Is this correct?

     

     

     

    Creating css rules really has nothing do with it. You need to nest tables as you state above.

     

    The rule if using tables for constuction is to keep the table as simple as possible, i.e. no splitting or merging cells. Use nested tables if you require a more complex structure.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 7, 2013 1:50 PM   in reply to OOlala_28

    OOlala_28 wrote:

     

    Can anyone help me?

     

     

    Not sure what help you require because you have diagnosed the problem and answered your own question.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 7, 2013 4:01 PM   in reply to OOlala_28
    Could you please tell me what the best course of action is?

    Yes.  If this is for a web site, start over with a pre-built CSS Layout.   

    In DW, go to File > New > Blank page > HTML > Layouts > choose one from the 3rd panel and hit Create.

     

    Use CSS styled lists for menus.

    http://alt-web.com/DEMOS/CSS-Horiz-menu-2.shtml

    http://alt-web.com/DEMOS/CSS-Multi-colored-drop-menu.shtml

     

    With few exceptions, tables are reserved for tabular data (spredsheets, charts); not layouts.

     

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points