Page Line up

jmalia · September 3, 2013, 9:09pm

For some reason out of the blue, I updated a site and now the images for the background of the page will not line up in IE. The site looks fine in Chrome however. I can’t seem to see the issue. Any advice? www.soupthyme.com

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Soup Thyme</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>
<style type="text/css">
<!--
body {
	background-color: #8b1515;
	color: #8B1515;
}
.style4 {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
}
.style21 {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000;
}
.style18 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
}
.style19 {
	color: #000000
}
.style23 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
}
.style15 {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	text-align: center;
}
.style20 {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #000;
}
.style11 {
	font-size: 11px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
.style24 {
	font-size: 2px
}
.style25 {
	font-size: 16px;
	font-weight: bold;
	color: #000;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
.style26 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
}
-->
</style>
</head>
<body>
<div align="center">
  <table id="Table_01" width="776" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td colspan="17"><img src="images/index_01.gif" width="775" height="190" alt=""></td>
      <td><img src="images/spacer.gif" width="1" height="190" alt=""></td>
    </tr>
    <tr>
      <td colspan="3" rowspan="3"><img src="images/index_02.gif" width="114" height="83" alt=""></td>
      <td width="193" height="75" colspan="4" class="images/index_03.gif"><div align="center"><span class="style4">450 Monroe Tpke.<br>
          Monroe, CT 06468<br>
          <strong>P: (203).268.0214</strong><br>
          F: (203).268.1073</span></div></td>
      <td colspan="10" rowspan="2"><img src="images/index_04.gif" width="468" height="82" alt=""></td>
      <td><img src="images/spacer.gif" width="1" height="75" alt=""></td>
    </tr>
    <tr>
      <td colspan="4" rowspan="2"><img src="images/index_05.gif" width="193" height="8" alt=""></td>
      <td height="7"><img src="images/spacer.gif" width="1" height="7" alt=""></td>
    </tr>
    <tr>
      <td rowspan="14"><img src="images/index_06.gif" width="34" height="578" alt=""></td>
      <td colspan="2" rowspan="2"><a href="menu.pdf" target="_blank"><img src="images/index_07.gif" alt="" width="75" height="39" border="0"></a></td>
      <td colspan="7"><img src="images/index_08.gif" width="359" height="1" alt=""></td>
      <td><img src="images/spacer.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
      <td rowspan="13"><img src="images/index_09.gif" width="48" height="578" alt=""></td>
      <td colspan="4"><a href="index.html"><img src="images/index_10.gif" alt="" width="109" height="38" border="0"></a></td>
      <td rowspan="2"><img src="images/index_11.gif" width="40" height="39" alt=""></td>
      <td><img src="images/index_12.gif" width="110" height="38" alt=""></td>
      <td colspan="2" rowspan="4"><img src="images/index_13.gif" width="56" height="122" alt=""></td>
      <td><img src="images/index_14.gif" width="105" height="38" alt=""></td>
      <td rowspan="4"><img src="images/index_15.gif" width="43" height="122" alt=""></td>
      <td colspan="2"><a href="contact.html"><img src="images/index_16.gif" alt="" width="101" height="38" border="0"></a></td>
      <td rowspan="13"><img src="images/index_17.gif" width="54" height="577" alt=""></td>
      <td><img src="images/spacer.gif" width="1" height="38" alt=""></td>
    </tr>
    <tr>
      <td colspan="4"><img src="images/index_18.gif" width="109" height="1" alt=""></td>
      <td><img src="images/index_19.gif" width="110" height="1" alt=""></td>
      <td colspan="2" rowspan="9"><img src="images/index_20.gif" alt="" width="75" height="350" border="0"></td>
      <td rowspan="3"><img src="images/index_21.gif" width="105" height="84" alt=""></td>
      <td colspan="2" rowspan="3"><img src="images/index_22.gif" width="101" height="84" alt=""></td>
      <td><img src="images/spacer.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
      <td width="259" height="38" colspan="6" background="images/index_23.gif"><span class="style18">Last Updated: <span class="style19">09/03/2013 @ 6:00am</span></span></td>
      <td><img src="images/spacer.gif" width="1" height="38" alt=""></td>
    </tr>
    <tr>
      <td colspan="6"><img src="images/index_24.gif" width="259" height="45" alt=""></td>
      <td><img src="images/spacer.gif" width="1" height="45" alt=""></td>
    </tr>
    <tr>
      <td colspan="3" rowspan="2"><img src="images/index_25.gif" width="91" height="116" alt=""></td>
      <td width="168" height="78" colspan="3" valign="top" background="images/index_26.gif"><span class="style21"> Tabbouleh <br>
        Greek Salad<br>
        Cranberry Apple Tuna Salad<br>
        Rainbow Salad</span></td>
      <td rowspan="6"><img src="images/index_27.gif" width="36" height="266" alt=""></td>
      <td width="262" height="121" colspan="4" rowspan="3" valign="top" background="images/index_28.gif"><span class="style15">Ronald Lee has worked as a professional chef for decades. In 2005 he established Soup Thyme, to share his passion for food,&nbsp;made from&nbsp;the finest quality ingredients. Since then, it has become a center-point eatery known to all in the town of Monroe.</span></td>
      <td rowspan="9"><img src="images/index_29.gif" width="7" height="455" alt=""></td>
      <td><img src="images/spacer.gif" width="1" height="78" alt=""></td>
    </tr>
    <tr>
      <td colspan="3"><img src="images/index_30.gif" width="168" height="38" alt=""></td>
      <td><img src="images/spacer.gif" width="1" height="38" alt=""></td>
    </tr>
    <tr>
      <td rowspan="7"><img src="images/index_31.gif" width="12" height="339" alt=""></td>
      <td width="247" height="241" colspan="5" rowspan="5" valign="top" background="images/index_32.gif"><p class="style14 style11 style23">          Chicken Pot Pie<br>
          Roasted Butternut Squash...................V,GF<br>
          Chicken Spinach Gorgonzola<br>
          Vegetable Beef Barley<br>
          Chicken Noodle <br>
          Broccoli &amp; Cheddar...........................V<br>
          Chicken &amp; Rice...............................GF<br>
          Kale &amp; Bean.........................V,GF<br>
          Chicken Artichoke &amp; Sun Dried Tomatoes<br>
          Chili............................................GF<br>
          Beef Stroganoff.................................GF<br>
          Macaroni &amp; Cheese...........................V<br>
          Tuscan Pork........................................GF</td>
    </tr>
    <tr>
      <td colspan="4"><img src="images/index_33.gif" width="262" height="45" alt=""></td>
      <td><img src="images/spacer.gif" width="1" height="45" alt=""></td>
    </tr>
    <tr>
      <td width="262" height="60" colspan="4" background="images/index_34.gif"><div align="center"><span class="style20">1/2 Panini &amp; Small Soup - $6.75</span></div></td>
      <td><img src="images/spacer.gif" width="1" height="60" alt=""></td>
    </tr>
    <tr>
      <td colspan="4"><img src="images/index_35.gif" width="262" height="40" alt=""></td>
      <td><img src="images/spacer.gif" width="1" height="40" alt=""></td>
    </tr>
    <tr>
      <td rowspan="3"><img src="images/index_36.gif" width="30" height="189" alt=""></td>
      <td width="343" height="146" colspan="6" rowspan="2" align="center" valign="middle" background="images/index_37.gif"><table width="337" border="0">
          <tr>
            <td><div align="center" class="style25">
                <p>Thyme Frame- $5.75 </p>
                <p>Chicken Breast, Ham, Swiss, Honey Mustard</p>
              </div></td>
          </tr>
          <tr>
            <td height="21">&nbsp;</td>
          </tr>
        </table>
        <a href="https://twitter.com/SoupThyme" target="_blank"><img src="images/twitter.gif" alt="" width="30" height="30" border="0"></a><a href="http://instagram.com/soupthyme" target="_blank"><img src="images/instagram.gif" alt="" width="30" height="30" border="0"></a></td>
      <td><img src="images/spacer.gif" width="1" height="91" alt=""></td>
    </tr>
    <tr>
      <td colspan="5" rowspan="2"><img src="images/index_38.gif" alt="" width="247" height="98" border="0" usemap="#Map"></td>
      <td><img src="images/spacer.gif" width="1" height="55" alt=""></td>
    </tr>
    <tr>
      <td colspan="6"><img src="images/index_39.gif" width="343" height="43" alt=""></td>
      <td><img src="images/spacer.gif" width="1" height="43" alt=""></td>
    </tr>
    <tr>
      <td><img src="images/spacer.gif" width="48" height="1" alt=""></td>
      <td><img src="images/spacer.gif" width="12" height="1" alt=""></td>
      <td><img src="images/spacer.gif" width="54" height="1" alt=""></td>
      <td><img src="images/spacer.gif" width="25" height="1" alt=""></td>
      <td><img src="images/spacer.gif" width="18" height="1" alt=""></td>
      <td><img src="images/spacer.gif" width="40" height="1" alt=""></td>
      <td><img src="images/spacer.gif" width="110" height="1" alt=""></td>
      <td><img src="images/spacer.gif" width="34" height="1" alt=""></td>
      <td><img src="images/spacer.gif" width="30" height="1" alt=""></td>
      <td><img src="images/spacer.gif" width="45" height="1" alt=""></td>
      <td><img src="images/spacer.gif" width="36" height="1" alt=""></td>
      <td><img src="images/spacer.gif" width="20" height="1" alt=""></td>
      <td><img src="images/spacer.gif" width="105" height="1" alt=""></td>
      <td><img src="images/spacer.gif" width="43" height="1" alt=""></td>
      <td><img src="images/spacer.gif" width="94" height="1" alt=""></td>
      <td><img src="images/spacer.gif" width="7" height="1" alt=""></td>
      <td><img src="images/spacer.gif" width="54" height="1" alt=""></td>
      <td></td>
    </tr>
  </table>
</div>
<map name="Map">
  <area shape="rect" coords="62,27,184,55" href="https://www.facebook.com/pages/Soup-Thyme/192964647825" target="_blank" alt="Facebook"></area>
</map>
</body>
</html>

ralphm · September 3, 2013, 10:18pm

Hi jmalia. Welcome to the forums.

It’s been a while since we’ve seen a site using tables for layout. This is a really out of date way to lay out a page, and introduces problems you don’t need. Anyhow, I’m not much good at debugging table layouts, but the one thing I’d suggest is that you add a doctype declaration at the top of the page, as otherwise browsers will drop into “quirks mode”.

E.g. put this at the top of your code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">