51 users online (0 members and 51 guests)  


  Results 1 to 3 of 3

Related

  1. Image over two table cells    Forum: HTML Forum
    Replies: 5
  2. Replies: 2
  3. stretching table    Forum: HTML Forum
    Replies: 5
  4. Table cells    Forum: HTML Forum
    Replies: 1
  1. #1
    Fusion Fox's Avatar
    New User

    Status
    Offline
    Join Date
    May 2007
    Posts
    3

    Table cells stretching and spreading out my design

    I'm sure this is a very common problem for beginners like me, I've created a template for a website and for the first couple of pages there were no problems:



    While I was making a 404 error page, the content in the main section of the page extended below the navigation on the left and because of this, the cells holding the navigation elements were stretched to produce this:





    I've tried to set values for the heights of the cells but that didn't make any difference. I guess the easiest way to fix this would be to somehow stop these cells from stretching but have an empty cell under these which can expand if the main content is too long.

    Here's the code for the template I'm using. It's pretty messy, partly because of my attempts to fix this problem and partly because I used Dreamweaver to create the original layout

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>Untitled Document</title>
    <!-- TemplateEndEditable --><!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
    <style type="text/css">
    <!--
    -->
    </style>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    <link href="../css/mainstyle.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body onload="MM_preloadImages('../images/HomeButton_f2.gif','../images/PhpButton_f2.gif','../images/MysqlButton_f2.gif','../images/LuqkimButton_f2.gif')">
    <table width="804" border="0" cellpadding="0" cellspacing="0">
      <!-- fwtable fwsrc="Untitled-1.png" fwbase="Untitled-1.gif" fwstyle="Dreamweaver" fwdocid = "1652277158" fwnested="0" -->
      <tr>
        <td height="0"><img src="../images/spacer.gif" width="5" height="1" border="0" alt="" /></td>
        <td height="0"><img src="../images/spacer.gif" width="175" height="1" border="0" alt="" /></td>
        <td height="0"><img src="../images/spacer.gif" width="8" height="1" border="0" alt="" /></td>
        <td height="0"><img src="../images/spacer.gif" width="105" height="1" border="0" alt="" /></td>
        <td height="0"><img src="../images/spacer.gif" width="511" height="1" border="0" alt="" /></td>
        <td height="0"><img src="../images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
      </tr>
      <tr>
        <td height="235" colspan="2" rowspan="3"><img src="../images/SiteLogo.gif" alt="" name="SiteLogo" width="180" height="235" border="0" id="SiteLogo" /></td>
        <td height="93" colspan="3"><img src="../images/SiteTitle.gif" alt="" name="SiteTitle" width="624" height="93" border="0" id="SiteTitle" /></td>
        <td height="0"><img src="../images/spacer.gif" width="1" height="93" border="0" alt="" /></td>
      </tr>
      <tr>
        <td colspan="2"><img src="../images/TitleCurve.gif" alt="" name="TitleCurve" width="113" height="84" border="0" id="TitleCurve" /></td>
        <td valign="top" bgcolor="#ffffff"><!-- TemplateBeginEditable name="PageTitle" -->
          <h1>Page title</h1>
        <!-- TemplateEndEditable --></td>
        <td><img src="../images/spacer.gif" width="1" height="84" border="0" alt="" /></td>
      </tr>
      <tr>
        <td rowspan="10" colspan="3" valign="top" bgcolor="#ffffff"><!-- TemplateBeginEditable name="MainPage" -->
          <h4>Sub-title</h4>
          <p>Main text</p>
          <!-- TemplateEndEditable --></td>
        <td><img src="../images/spacer.gif" width="1" height="58" border="0" alt="" /></td>
      </tr>
      <tr>
        <td height="359" rowspan="8"><img src="../images/Untitled-1_r4_c1.gif" alt="" name="Untitled1_r4_c1" width="5" height="359" border="0" id="Untitled1_r4_c1" /></td>
        <td height="46"><a href="index.php" target="_self" onmouseover="MM_swapImage('HomeButton','','../images/HomeButton_f2.gif',1);" onmouseout="MM_swapImgRestore()"><img src="../images/HomeButton.gif" alt="Home Button" name="HomeButton" width="175" height="46" border="0" id="HomeButton" /></a></td>
        <td height="0"><img src="../images/spacer.gif" width="1" height="46" border="0" alt="" /></td>
      </tr>
      <tr>
        <td height="47" rowspan="2"><a href="phptest.php" target="_self" onmouseover="MM_swapImage('PhpButton','','../images/PhpButton_f2.gif',1);" onmouseout="MM_swapImgRestore()"><img src="../images/PhpButton.gif" alt="PHP Test Page Button" name="PhpButton" width="175" height="47" border="0" id="PhpButton" /></a></td>
        <td height="0"><img src="../images/spacer.gif" width="1" height="8" border="0" alt="" /></td>
      </tr>
      <tr>
        <td height="0"><img src="../images/spacer.gif" width="1" height="39" border="0" alt="" /></td>
      </tr>
      <tr>
        <td height="53" rowspan="2"><a href="mysqltest.php" target="_self" onmouseover="MM_swapImage('MysqlButton','','../images/MysqlButton_f2.gif',1);" onmouseout="MM_swapImgRestore()"><img src="../images/MysqlButton.gif" alt="MySQL Test Page Button" name="MysqlButton" width="175" height="53" border="0" id="MysqlButton" /></a></td>
        <td height="0"><img src="../images/spacer.gif" width="1" height="7" border="0" alt="" /></td>
      </tr>
      <tr>
        <td height="46"><img src="../images/spacer.gif" width="1" height="46" border="0" alt="" /></td>
      </tr>
      <tr>
        <td height="129"><img src="../images/Untitled-1_r9_c2.gif" alt="" name="Untitled1_r9_c2" width="175" height="129" border="0" id="Untitled1_r9_c2" /></td>
        <td height="129"><img src="../images/spacer.gif" width="1" height="129" border="0" alt="" /></td>
      </tr>
      <tr>
        <td height="54"><a href="http://luqkim.fusionfox.co.uk" target="_blank" onmouseover="MM_swapImage('LuqkimButton','','../images/LuqkimButton_f2.gif',1);" onmouseout="MM_swapImgRestore()"><img src="../images/LuqkimButton.gif" alt="Luqkim Page Button" name="LuqkimButton" width="175" height="54" border="0" id="LuqkimButton" /></a></td>
        <td height="54"><img src="../images/spacer.gif" width="1" height="54" border="0" alt="" /></td>
      </tr>
      <tr>
        <td height="30"><img src="../images/Untitled-1_r11_c2.gif" alt="" name="Untitled1_r11_c2" width="175" height="30" border="0" id="Untitled1_r11_c2" /></td>
        <td height="30"><img src="../images/spacer.gif" width="1" height="30" border="0" alt="" /></td>
      </tr>
      <tr>
        <td colspan="2">&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td colspan="6">
          <hr />     
          <a href="http://httpd.apache.org/" target="_blank"><img src="../images/apache.gif" alt="Hosted and live!" width="191" height="32" border="0"></a>
          <a href="http://validator.w3.org/check?uri=referer" target="_blank"><img border="0" src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional" height="31" width="88"></a>
          <a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank"><img border="0" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" height="31" width="88"></a>
          <a href="http://www.php.net/" target="_blank"><img src="../images/php-power-white.gif" alt="Powered by PHP" width="88" height="31" border="0"></a>
          <a href="http://www.mysql.com/" target="_blank"><img src="../images/powered-by-mysql.png" alt="Powered by MySQL" width="88" height="31" border="0"></a><a href="mailto:admin@fusionfox.co.uk"><img src="../images/email.png" alt="Email me" width="200" height="31" border="0"></a>    </td>
      </tr>
    </table>
    </body>
    </html>
    Hope somebody can give me a hand with this, thanks,
    Matt A.

  2. #2
    psyphi's Avatar
    New User

    Status
    Offline
    Join Date
    Jun 2007
    Posts
    5

    Re: Table cells stretching and spreading out my design

    You could try adding valign="top" into the
    <table width="804" border="0" cellpadding="0" cellspacing="0">

    If that doesn't do it, then try putting valign="top" into all of the <td> tags for all of the images.

  3. #3
    Fusion Fox's Avatar
    New User

    Status
    Offline
    Join Date
    May 2007
    Posts
    3

    Re: Table cells stretching and spreading out my design

    Since I'm trying to work in XHTML (although I haven't validated my code yet) I used the 'vertical-align' CSS element which does the same thing as valign used to do.

    Code:
    td {
        vertical-align:top;
    }
    Code:
    table {
        vertical-align:top;
    }
    Neither of these solved the problem. Anybody got any other ideas?