I split an image and put it into 2 separate tables but there's a small gap inbetween. The image is split into door_top25px.jpg and door_bottom257px.jpg and lines up vertically. The reason I split the door image is because I needed the blue band (behind the directional buttons) to continue behind the doortop. And to lineup I made the doortop and buttons' height 25px.
PLEASE HELP! I'm desperate!
web site URL:
http://frankfordhistoricalsociety.org
In the code area I highlighted the area that I'm referring to.
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" />
<META NAME="keywords" CONTENT="official web...eek" />
<title>The Historical Society of Frankford</title>
<style type="text/css">
.address {
font-family: 'Times New Roman', Times, serif;
margin-top: 0.5em;
margin-bottom: 0.5em;
font-size: 0.9em;
line-height: 1.15em;
}
.contact {
font-family: 'Times New Roman', Times, serif;
margin-top: 0.7em;
margin-bottom: 0em;
font-size: 0.9em;
line-height: 1.15em;
}
.event {
font-family: 'Times New Roman', Times, serif;
color: #333399;
font-size: 1.75ex;
line-height: 2.5ex;
}
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
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_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_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>
</head>
<body background="/art/cyprbk_pattern.jpg" onload="MM_preloadImages('/art/home2_on.gif','/art/about2_on.gif','/art/membership2_on.gif','/art/program2_on.gif','/art/history2_on.gif')">
<!-- #ccccff is light blue -->
<!-- #333399 is deep blue -->
<!-- top section -->
<a name="top"></a>
<div align="center">
<table width="684" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3"><img src="/art/spacer.gif" width="684" height="30" border="0" />
</td>
</tr>
<tr>
<!-- 1ST COLUMN w CNEPH BUTTON -->
<td align="left" valign="top">
<a href="http://frankfordhistoricalsociety.org/cneph/cnephhome.htm">
<img src="art/cneph_button.gif" border="0" alt="Center for Northeast Philadelphia History" title="click here for more information"/>
</a>
</td>
<br />
<!-- 2ND COLUMN w LOGO-->
<td width="324" align="center" valign="top">
<a href="index.html"><img src="/art/frankford_logo2.png" border="0" alt="Historical Society of Frankford" />
</a><!-- logo formerly used was frankford_logo4.gif -->
<br />
<font face="Times New Roman, Times, serif" size="2px">
1507 Orthodox St. • Philadelphia, PA 19124 • 215.743.6030
</font>
<br />
</td>
<!-- 3RD COLUMN w HALL OF FAME BUTTON-->
<td align="right" valign="top">
<a href="fame1.html"><img src="art/hof_button.gif" border="0" alt="NE Philadelphia Hall of Fame" title="click here for more information"/>
</a><!-- orig art was home_button_SM2.gif -->
<br />
</td>
</tr>
<tr>
<td colspan="3" align="center" text-align="center">
<font face="Times New Roman, Times, serif" size="2px">
• PRESERVING AND PRESENTING THE HISTORY OF NORTHEAST PHILADELPHIA SINCE 1905 •
</font>
<br />
</td>
</tr>
<tr>
<td> </td><td> </td><td> </td>
</tr>
</table><!-- END TABLE 1 -->
<!-- table for doortop and background color -->
<td bgcolor="#333399">
<table border="0" cellpadding="0" cellspacing="0" width="178">
<tbody>
<tr>
<!-- doortop - height should match button links' height -->
<td bgcolor="#333399" width="178"><img src="/art/door_top25px.jpg" width="178" height="25" border="0" valign="bottom" /></td>
<!-- 2ND TABLE button links-->
<td bgcolor="#333399" width="506">
<table border="0" cellpadding="0" cellspacing="0" width="506">
<tbody>
<tr>
<td width="101" height="25" bgcolor="#333399">
<a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home2_off','','/art/home2_on.gif',1);"><img name="home2_off" src="/art/home2_off.gif" width="101" height="25" border="0" alt="HOME" /></a> </td>
<td width="101" height="25" bgcolor="#333399">
<a href="about.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('about2_off','','/art/about2_on.gif',1);"><img name="about2_off" src="/art/about2_off.gif" width="101" height="25" border="0" alt="ABOUT US" /></a> </td>
<td width="101" height="25" bgcolor="#333399">
<a href="member.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('membership2_off','','/art/membership2_on.gif',1);"><img name="membership2_off" src="/art/membership2_off.gif" width="101" height="25" border="0" alt="MEMBERSHIP" /></a> </td>
<td width="101" height="25" bgcolor="#333399">
<a href="program.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('program2_off','','/art/program2_on.gif',1);"><img name="program2_off" src="/art/program2_off.gif" width="101" height="25" border="0" alt="PROGRAM" /></a> </td>
<td width="97" height="25" bgcolor="#333399">
<a href="history.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('history2_off','','/art/history2_on.gif',1);"><img name="history2_off" src="/art/history2_off.gif" width="97" height="25" border="0" alt="HISTORY" /></a> </td>
<td width="5" height="25" bgcolor="#333399">
<img src="/art/spacer.gif" width="5" border="0"/>
</td>
</tr>
</tbody>
</table><!-- END 2ND TABLE button links --> </td>
</tr>
<tr bgcolor="#ccccff">
<td align="left" valign="top"><!-- 3RD TABLE door bottom -->
<table border="0" cellpadding="0" cellspacing="0" width="178">
<tbody>
<tr>
<td><img src="/art/door_bottom257px.jpg" width="178" height="257" border="0" /></td>
</tr>
<tr>
<td><!-- 4TH TABLE -text in left column -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="10"><img src="art/spacer.gif" height="1" width="10" /></td>
<td>
<font face="Times New Roman, Times, serif" size="2" align="left">
<strong>Contact Information:</strong><br />
<p class="address">
Historical Society of Frankford<br />
1507 Orthodox Street<br />
Philadelphia, PA 19124<br />
<strong>215.743.6030</strong>
</p>
<p class="address">
Please send all inquiries and membership correspondence to <strong>HSF, P.O. Box 4888, Philadelphia, PA 19124.</strong>
</p>
<p class="contact">
Please call the Society and <br />leave a message or email us:
</p>
<p class="contact">
For general information: <a href="mailto:info@frankfordhistory.org">info@frankfordhistory.org</a>
</p>
<p class="contact">
For research questions: <a href="mailto:library@frankfordhistory.org">library@frankfordhistory.org</a>
</p>
<p class="contact">
Jack McCarthy: <a href="mailto:jmccarthy@frankfordhistory.org">jmccarthy@frankfordhistory.org</a>
</p>
</font>
</td>
<td width="8"></td>
</tr>
</tbody></table><!--END 4TH TABLE -->
</td>
</tr>
</tbody></table><!-- END 3RD TABLE --> </td>
<td align="left" bgcolor="#ccccff" valign="top" width="500">
<p class="event">
<strong>Tuesday, October 13, 2009, 7:30 pm</strong><br />
<a href="/program.html">
<strong>PLAYING CARDS and the AMERICAN REVOLUTION.</strong>
(Featuring items from HSF’s collections) Presented by Patricia Coyne.</a>
<br />
<br />
<strong><em>Special Events</em></strong>:
<br />
<strong>Sunday, October 18, 2009, 1 – 5 pm</strong><br />
<a href="http://www.frankfordhistoricalsociety.org/cneph/historyfaire.pdf">
<strong>HISTORY DAY FAIR, Holy Family University Student Center.</strong></a>
<br />
<br />
<strong>Sunday, October 18, 2009, 1 pm</strong><br />
<a href="/program.html">
<strong>NORTHEAST PHILADELPHIA HALL OF FAME (Ignaugral Induction Ceremonies)</strong></a>
<br />
<br />
<a href="/program.html">
<em>For more information about these and future events, click here.</em></a>
</p>
<hr color="#333399" size="2" noshade="noshade" />
<img src="/heading/mission.gif" width="501" height="50" border="0" alt="Mission" />
<br />
<font face="Times New Roman, Times, serif" size="2">
HSF collects, preserves and presents the history of Northeast Philadelphia and the region. Recognizing .....lphia and its place in the world.<br />
<br />
1507 Orthodox Street <br />
Philadelphia, PA 19124<br />
(215) 743-6030<br />
<br />
<strong>Directions</strong><br />
One block west ....exit).<br />
<br />
</font>
</td>
</tr>
<tr bgcolor="#ccccff">
<td align="left" valign="top"> </td>
<td> </td>
</tr>
</table>
<tr>
<td>
<br />
<font face="Times New Roman, Times, serif" size="2" color="#000000">
<a href="index.html">Home</a> •
<a href="about.html">About Us</a> •
<a href="member.html">Membership</a> •
<a href="program.html">Programs</a> •
<a href="history.html">History</a><br />
<br />
<a href="#top">Return to Top</a><br />
</font>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>