content shifting down in ie

[Guest obli7vion]

I am working on my first css website...combining tables and css.Everything looks fine in all browsers tested except ie/mac. I do not have access to ie/win so I do not know how this will render. The content in the left column is where I am having trouble. The #links cell seems to be taller than the menu content within it, causing everything in the cell below it to shift down. Does anybody have ideas on how to fix this problem? I hope this makes sense. My code may be a bit sloppy.Here is all of the relevant code:

body {	font-family: Georgia, "Times New Roman", Times, serif;	font-size: 12px;	background-color: #EEE074;	padding: 0px;	margin-top: 0px;	margin-right: 0%;	margin-bottom: 0px;	margin-left: 0%;	background-image: url(images/gradient.gif);}#mainTable {	width: 740px;	height: auto;	border: thin solid #000000;	line-height: 1.5em;	margin: 25px 0px 25px 35px;	background-image:  url(images/gradient.gif);	background-repeat: repeat-x;	padding-left: 0%;}.lft {	background-image: none;	padding: 0px;	margin: 0px;	background-color: #FFFFCC;	border-left-width: thin;	border-left-style: none;	border-left-color: #000000;	vertical-align: top;	display: table-cell;	clear: none;	}#links {	background-image: none;	padding: 0px;	margin: 0px;	vertical-align: top;	clear: both;	display: block;	float: left;}#links ul{	float:left;	width:100%;	vertical-align: top;	list-style-type:none;	display: block;	clear: both;	margin: 0px;	padding: 0px;}#links a{	display:block;	text-decoration:none;	color:white;	background-color:#003366;	padding:10px;	border-right:none;	border-top-width: thin;	border-bottom-width: 1px;	border-top-style: none;	border-bottom-style: solid;	border-left-style: none;	border-top-color: #FFFFFF;	border-bottom-color: #FFFFFF;	width: 120px;	font-size: 13px;	font-weight: bold;	clear: both;	margin: 0px;}#links a:hover {	background-color:#CC6633;	cursor: hand;	clear: both;	margin: 0px;}

<table border="0" cellpadding="0" cellspacing="0" id="mainTable">  <tr height="90" class="top">    <td class="topheader" colspan="3"><a href="index_final.htm"><img src="images/  StickBoy_OvalLogo.gif" width="225" height="90" border="0"></a></td>  </tr>  <tr>       <td width="120" height="213" id="links">    <ul>  <li><a href="text/index_final.htm">Home</a></li>        <li><a href="text/history.htm">History</a></li>        <li><a href="text/products.htm">Products</a></li>        <li><a href="text/letter.htm">Letter from Carson</a></li>        <li><a href="text/contact.htm">Contact</a></li>    </ul></td>    <td width="380" rowspan="2" class="rt"><h2>Welcome to Stick Boy<br />      Bread Company!</h2>        <h1>  <strong> If you are looking for a "real" bakery, you are in the right place.  Welcome to Stick Boy Bread Company!</strong>  <p />  <img src="images/stickboy_002_edited.jpg" width="340" height="262">        <p>lots of text here        </h1></td>    <td width="220" rowspan="2" class="rt"><img src="images/sticknews3.gif" width="257" height="151">       <h1>lots of text here<a href="#">more</a></h1><img src="images/ovenonlyandcover_edit.gif" class="icenter" width="220" height="261">	<br />	<h1> Download our latest newsletter <a href="text/news_winter06.pdf">here</a>.</h1>       	 <h1> </h1></td>  </tr>  <tr>     <td rowspan="2" align="center" class="lft"><img src="images/soupoday.gif" width="140" height="188" align="texttop" class="clear"><br /></td>  </tr>  <tr>    <td colspan="2" class="btm">    <img src="images/Freshoven.gif" width="250" height="97" class="fllftclear"><br />    <img src="images/stickboy_073_edited.jpg" width="250" height="165" class="fllftclear2">	<h1 class="fresh">lots of text here</h1>    </td>  </tr></table>

[raimo]

hmmm, luckilly I have no Apple, I'm kind a very apple allergic. :)But anyway:<tr height="90" class="top">in HTML tr -element has no height attribute.http://www.w3.org/TR/html4/struct/tables.html#edef-TRif You need set tr height, use CSS:

tr.top{ /* this is effective only tr with class "top" */height: 90px;}tr#top{ /* this is effective only tr with id "top" */height: 90px;}tr{ /* this is effective for all tr -elements */height: 90px;}

In here we have tags in very wrong order:

<h1><strong> If you are looking for a "real" bakery, you are in the right place.  Welcome to Stick Boy Bread Company!</strong><p /><img src="images/stickboy_002_edited.jpg" width="340" height="262"><p>lots of text here</h1>

Should be something like:

<h1>Welcome to Stick Boy Bread Company!</h1> <strong>If You are looging for a ... </strong><img src="" alt=""></img> <p>lot of text here</p>