Forum Moderators: not2easy
<html>
<head>
<title>Example.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#333333" text="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<br>
<br>
<br>
<br>
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="525">
<tr>
<td width="848" height="47"><img src="images/top_logo.gif" width="193" height="47"></td>
<td height="47"> </td>
</tr>
<tr>
<td width="848" height="20" valign="bottom"><img src="images/navigation-bar.gif" width="577" height="20" usemap="#Navigation" border="0"></td>
<td height="20" background="images/bg-navigation.gif"> </td>
</tr>
<tr>
<td width="848" height="28" bgcolor="#00CCFF">
<img src="images/image_top_subpages.gif" width="576" height="28"></td>
<td height="28" bgcolor="#00CCFF"> </td>
</tr>
<tr>
<td width="848" height="25" background="images/bottom-bar.gif">
<img src="images/bottom-bar.gif" width="848" height="22"></td>
</tr>
<tr>
<td width="848">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="172" height="19"><img src="images/header-newsupdates.gif" width="164" height="19"></td>
<td width="21" height="19"><img src="images/image-vertline.gif" width="21" height="19"></td>
<td width="178" height="19"><img src="images/header-specials.gif" width="164" height="19"></td>
<td width="21" height="19"><img src="images/image-vertline.gif" width="21" height="19"></td>
<td height="19" width="185"><img src="images/header-webportfolio.gif" width="162" height="19"></td>
</tr>
<tr>
<td width="172" height="200" valign="top">
<table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td><font face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#00CCFF">[1.1.2003]
</font><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><br>
<b>·</b> some text goes here<br>
<br>
</font><font face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#00CCFF">[1.4.2003]
</font><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><br>
<b>·</b> some text goes here</font></td>
</tr>
</table>
</td>
<td width="21" background="images/bg-verticalline.gif" height="200"> </td>
<td width="178" height="200" valign="top">
<table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><b>·</b>
some text goes here<br>
<br>
<b>·</b> some text goes here<br>
<br>
<b>·</b> some text goes here</font></td>
</tr>
</table>
</td>
<td width="21" background="images/bg-verticalline.gif" height="200"> </td>
<td width="185" height="200" valign="top">
<table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td height="14"><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><b>·</b>
some text goes here<br>
<br>
<b>·</b> some text goes here</font></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td height="219"> </td>
</tr>
<tr>
<td width="848" height="25"> </td>
<td height="25"> </td>
</tr>
<tr>
<td width="848" height="56"> </td>
<td height="56">
<div align="center"><img src="images/bardcode.gif" width="173" height="56"></div>
</td>
</tr>
</table>
<map name="Navigation">
<area shape="rect" coords="2,4,52,19" href="#" alt="Home" title="Home">
<area shape="rect" coords="56,5,123,19" href="#" alt="Services We Offer" title="Services We Offer">
<area shape="rect" coords="125,5,205,18" href="#" alt="Contact Section" title="Contact Section">
<area shape="rect" coords="212,4,330,19" href="#" alt="Customer Support" title="Customer Support">
<area shape="rect" coords="334,4,414,19" href="#" alt="Web Design" title="Web Design">
<area shape="rect" coords="418,4,516,18" href="#" alt="Graphic Design " title="Graphic Design ">
</map>
</body>
</html>The weird porportional bug is this line is stretched, giving it a weird look
<td height="20" background="images/bg-navigation.gif"> </td>
<td width="848" height="25" background="images/bottom-bar.gif">
While it's not likely the cause of your problem, make sure you include a DOCTYPE for your page.
Another non-serious problem you have is you're not specifying units for any of your objects dimentions. If you want them in pixels, make sure you put the suffix px on all the appliciable nubmers.
From Copy and pasting your HTML, I really have very little understanding of what your page is supposed to look like, or what exact lines you are talking about. Seems like the problem might be you not managing your table cells properly or something.
And I'm not big at dealing with tables... but AFAIK, cells in the same row are automatically the same height. You only need to specify the height of the largest one.
Lastly, I'd like to tell you not to use tables for site layouts. It's not longer necessary, and offers much less freedom, accessibility to users, and customizations.
Overall, it looks like you need to totally re-learn HTML and CSS... however the hell you learned to code HTML, and however you sucessfully made webpages before, is totally different than what any web designer should be doing now. Sorry for being harsh, but it's truth.
edit:
I made a somewhat similar (just looked at the very basic design, I don't know exactly what you want) design to what you had there. You can totally customize it's appearance, the colors is just to show you generally how you can lay stuff out. You could make them all the same color, then put other containers insides for different effects, especially if you wanted to use borders.
[edited by: Xapti at 4:57 am (utc) on May 3, 2007]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>An example layout</title>
<style type="text/css">
*{padding:0;margin:0}
body{width:100%;height:100%;position:relative;color:white;z-index:1}
.header{background-color:red}
.col1{background-color:green;float:left;width:25%;height:400px}
.col2{background-color:blue;float:left;width:25%;height:400px}
.col3{background-color:purple;float:left;width:25%;height:400px}
.footer{text-align:right;background-color:black;clear:both}
</style>
</head>
<body>
<div class="header">content, Whatever you wanted here, images, etc.<br>content<br>content<br><img src="" alt="hello" height="75px" width="300px"></div>
<div class="col1">content</div>
<div class="col2">content<br>can have multiple lines<br> can be list, whatever</div>
<div class="col3">content</div>
<div class="footer">just some more content</div>
</body>
</html>
