Dreaweaver table problem

obeeee · 03-22-2007, 11:00 AM

hi this is my first post.

i cant seem to get a table to fill the whole screen verticly.

i set the verticle value to 100% but it does not take the whole verticle height.

i can manage to get the table to fill the whole width of the screen using 100%.

to achieve the 100% i have to reuse the same page which i downloaded. when i compare the code for this with one that i have made from scratch (which does not work) i can't see any differences.

i would be very grateful of any help.

Taltos · 03-22-2007, 11:55 AM

I'm not sure what the solution is without knowing more about the problem or seeing the html and css for the site.

BUT, I suspect your problem is that when you use percentages, all the parent tags that can have a height, have to have a height of 100% defined. So, if your table is contained inside another table or inside a <div> then those tags have to have a height of 100% also. Otherwise the browser trying to display the table doesn't know 100% of what?

Hope this makes some sense.

obeeee · 03-22-2007, 12:00 PM

HTML Code:

thanks very much for responding.

i think that the outer table is the one set to 100% and i normally use ie as a browser. here is one example. would you mind taking a look?

<!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" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.style1 {font-size: 10px}
.style11 {	font-size: 18px;
	color: #000000;
	font-weight: bold;
}
.style14 {font-size: 18px; }
.style20 {font-size: 19.5px}
.style24 {font-weight: bold; color: #52187F;}
.style25 {font-weight: bold; color: #ECB72D;}
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
}
a:link {
	color: #FFFFFF;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FFFFFF;
}
a:hover {
	text-decoration: none;
	color: #EDB32D;
}
a:active {
	text-decoration: none;
	color: #FFFFFF;
}
body {
	margin-left: 6px;
	margin-top: 2px;
	margin-right: 6px;
	margin-bottom: 2px;
}
.style37 {color: #F4AF36}
.style42 {font-size: 14px}
.style43 {font-weight: bold; color: #000000;}
.style44 {font-size: 14px; color: #000000; font-weight: bold; }
.style45 {font-size: 14px; color: #F4AF36; }
.style46 {color: #000000}
.style49 {font-size: 22px}
.style50 {font-size: 12px}
.style51 {color: #52187F}
.style52 {color: #EDB234}
.style55 {font-size: 32px}
-->
</style>
<script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body>
<table width="100%" height="100%"  border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="71" colspan="3" align="center" valign="top"><table width="100%" height="71" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td height="120" valign="top" background="repeate.jpg"><div align="center">
          <table width="905" height="120" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td valign="top" background="menubackground4.jpg"><table width="693" height="56" border="0" align="right" cellpadding="0" cellspacing="0" class="style1">
                <tr>
                  <td width="113" height="28">&nbsp;</td>
                  <td width="114">&nbsp;</td>
                  <td width="114">&nbsp;</td>
                  <td width="115">&nbsp;</td>
                  <td width="114">&nbsp;</td>
                  <td width="112">&nbsp;</td>
                  <td width="11">&nbsp;</td>
                </tr>
                <tr>
                  <td align="center" valign="middle"><div align="center" class="style1"><a href="index.html">Home</a></div></td>
                  <td align="center" valign="middle"><div align="center"><a href="index.html">New Business </a></div></td>
                  <td align="center" valign="middle"><div align="center"><a href="index.html"></a><a href="index.html">Market Research</a></div></td>
                  <td align="center" valign="middle"><a href="index.html">Test Market </a></td>
                  <td align="center" valign="middle"><div align="center"><a href="index.html">Profit Plan </a></div></td>
                  <td align="center" valign="middle"><div align="center"><a href="index.html">Contact Us</a> </div></td>
                  <td>&nbsp;</td>
                </tr>
              </table></td>
            </tr>
          </table>
        </div></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td align="center" valign="top"><br /></td>
    <td align="center" valign="top"><a href="http://www.thehoodedwarbler.com/aboutus.html"></a>
        <table width="902" height="166" border="0" align="center" cellpadding="2" cellspacing="0">
          <tr>
            <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="2">
                <tr>
                  <td><div align="center">
                      <p><span class="style14"><span class="style20"><span class="style55">Test the potential profitability of your  new business on the web.&nbsp;</span><br />
                              <span class="style49"><span class="style24">Test</span><span class="style25">Your</span><span class="style24">Market</span> provides the quickest,  easiest, low-cost answer</span></span></span><span class="style49">.</span><br />
                              <br />
                    </p>
                  </div></td>
                </tr>
                <tr>
                  <td height="120" valign="middle"><img src="pound2.jpg" width="900" height="128" /></td>
                </tr>
                <tr>
                  <td height="120" valign="middle"><table width="100%" height="88" border="0" align="center" cellpadding="10" cellspacing="0" bordercolor="#52187F">
                      <tr>
                        <td width="196" valign="top"><div align="center" class="style42">
                          <div align="center"><span class="style43">Results=Profitable?</span></div>
                        </div></td>
                        <td width="219" valign="top">&nbsp;</td>
                        <td width="219" valign="top"><div align="center" class="style42">
                          <div align="center"><span class="style43">Result = Unproven?</span></div>
                        </div></td>
                        <td width="202" valign="top">&nbsp;</td>
                        <td width="202" valign="top"><p align="center" class="style44">Result= Unprofitable?</p>                            </td>
                        <td width="203" valign="top">&nbsp;</td>
                        <td width="203" valign="top"><p align="center" class="style45"><span class="style43"><strong>Start Now</strong></span></p>                            </td>
                      </tr>
                      <tr>
                        <td width="20%" valign="top" bgcolor="f1e2f9"><div align="center" class="style50">
                          <div align="justify"><span class="style37"><span class="style46">Plan, raise capital and invest with greater confidence and more efficiently.</span></span></div>
                        </div></td>
                        <td width="7%" valign="top" bgcolor="f1e2f9">&nbsp;</td>
                        <td width="20%" valign="top" bgcolor="f1e2f9"><div align="center" class="style50">
                          <div align="justify"><span class="style37"><span class="style46">Modify and refine your strategy before committing significant resources.</span></span></div>
                        </div></td>
                        <td width="7%" valign="top" bgcolor="f1e2f9">&nbsp;</td>
                        <td width="20%" valign="top" bgcolor="f1e2f9"><p align="center" class="style50">Stop without further cost.</p>
                        <p align="center" class="style50">&nbsp;</p></td>
                        <td width="203" valign="top" bgcolor="f1e2f9">&nbsp;</td>
                        <td width="20%" valign="top" bgcolor="f1e2f9"><div align="center" class="style50">
                          <div align="justify"><span class="style37"><span class="style46">Follow our guidelines to plan your business strategy</span></span>. <span class="style51"><br />
                          Click</span> <span class="style52">Here</span>. </div>
                        </div></td>
                      </tr>
                      
                      
                  </table></td>
                </tr>
                <tr>
                  <td><table width="900" border="0" align="center" cellpadding="3" cellspacing="0">
                      <tr>
                        <td colspan="5" valign="top"><div align="center"><span class="style11">How do we do it?</span><br />  
                          <br />
                        </div></td>
                      </tr>
                      <tr>
                        <td width="28%" valign="top" bgcolor="f1e2f9"><div align="left" class="style46">
                          <div align="justify"><span class="style50">We design your website so that  it is optimised for search engines and is effective in generating a response  from visitors</span></div>
                        </div></td>
                        <td width="8%" valign="top" bgcolor="f1e2f9"><div align="justify"><span class="style46"></span></div></td>
                        <td width="28%" valign="top" bgcolor="f1e2f9"><div align="left" class="style46">
                          <div align="justify"><span class="style50">We promote your site via Google  Ad Words to ensure immediate visitors actively searching for the relevant  products or services you are selling</span></div>
                        </div></td>
                        <td width="8%" valign="top" bgcolor="f1e2f9"><div align="justify"><span class="style46"></span></div></td>
                        <td width="28%" valign="top" bgcolor="f1e2f9"><div align="left" class="style46">
                          <div align="justify"><span class="style50">We set up measurement systems  via Google Analytics and advise you how to interpret the results.</span></div>
                        </div></td>
                      </tr>
                  </table></td>
                </tr>
            </table></td>
          </tr>
          <tr>
            <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td valign="top">&nbsp;</td>
                  <td valign="top"><div align="center"><br />
                  </div></td>
                  <td><div align="right"></div></td>
                </tr>
            </table></td>
          </tr>
      </table></td>
    <td align="center" valign="top"><br /></td>
  </tr>
  <tr bgcolor="#000033">
    <td height="5%" bgcolor="#52187F">&nbsp;</td>
    <td height="50" bgcolor="#52187F"><table width="900" height="20" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td height="40" bgcolor="#FFFFFF"><div align="center">casestudies will go here. casestudies will go here. casestudies will go here. casestudies will go here. casestudies will go here. </div></td>
      </tr>
    </table></td>
    <td bgcolor="#52187F">&nbsp;</td>
  </tr>
</table>
</body>
</html>

**chicgeek** · 03-22-2007, 12:02 PM

Please put long code in code boxes.

Taltos · 03-22-2007, 01:29 PM

It looks like you have a stray </div> tag. And your main table is set for 100% but the body is not. All parent tag or tags that contain your table have to have a height of 100%. Add a new style like this:

html, body {
height: 100%;
}

You might also add any default font definitions, etc. in here. See if that helps.