Table Gap ??

[Sketch]

I have started to develop another site and I seem to have a problem with something in the code of my table, the problem doesn't show in FireFox it only shows in Internet Explorer.

Click Here

If anyone can tell my why this is happening that would be great.

Cheers

[Jazzee]

Change this:

					<td valign="bottom" align="left" colspan="2">
						<img src="images/rigweld-logo-top.gif" alt="Rigweld"><img src="images/rigweld-text.gif" alt="Rigweld">
					</td>
				</tr>
				<tr>
					<td class="tdNavigation" valign="top" width="50" height="2">
						<img src="images/rigweld-logo-middle.gif" alt="Rigweld"> 
					</td>

					<td class="tdNavigation" align="left" width="90%" valign="middle">
						<a href="index.html" onfocus="this.blur()" class="mouseOut">&nbsp;Infrastructure&nbsp;</a>&nbsp;|&nbsp;
						<a href="#" onfocus="this.blur()" class="mouseOut">&nbsp;Plant&nbsp;Hire&nbsp;</a>&nbsp;|&nbsp;
						<a href="#" onfocus="this.blur()" class="mouseOut">&nbsp;Labor&nbsp;Hire&nbsp;</a>&nbsp;|&nbsp;
						<a href="#" onfocus="this.blur()" class="mouseOut">&nbsp;Photo&nbsp;Gallery&nbsp;</a>&nbsp;|&nbsp;

						<a href="#" onfocus="this.blur()" class="mouseOut">&nbsp;Contact&nbsp;Us&nbsp;</a>
					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2">
						<img src="images/rigweld-logo-bottom.gif" alt="Rigweld">
					</td>

To this:

					<td valign="bottom" align="left" colspan="2"><img src="http://www.sketchthat.com/dev/rigweld/images/rigweld-logo-top.gif" alt="Rigweld"><img src="http://www.sketchthat.com/dev/rigweld/images/rigweld-text.gif" alt="Rigweld"></td>
				</tr>
				<tr>
					<td class="tdNavigation" valign="top" width="50" height="2"><img src="http://www.sketchthat.com/dev/rigweld/images/rigweld-logo-middle.gif" alt="Rigweld"></td>

					<td class="tdNavigation" align="left" width="90%" valign="middle">
						<a href="index.html" onfocus="this.blur()" class="mouseOut">&nbsp;Infrastructure&nbsp;</a>&nbsp;|&nbsp;
						<a href="#" onfocus="this.blur()" class="mouseOut">&nbsp;Plant&nbsp;Hire&nbsp;</a>&nbsp;|&nbsp;
						<a href="#" onfocus="this.blur()" class="mouseOut">&nbsp;Labor&nbsp;Hire&nbsp;</a>&nbsp;|&nbsp;
						<a href="#" onfocus="this.blur()" class="mouseOut">&nbsp;Photo&nbsp;Gallery&nbsp;</a>&nbsp;|&nbsp;

						<a href="#" onfocus="this.blur()" class="mouseOut">&nbsp;Contact&nbsp;Us&nbsp;</a>
					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2"><img src="http://www.sketchthat.com/dev/rigweld/images/rigweld-logo-bottom.gif" alt="Rigweld"></td>

Putting the <td>, <img stuff> and </td> all on the same line usually fixes gaps like that.

[Sketch]

Thanks Jazzee,

I didn't think it would be something so simple, I thought it was a syntax problem, not something like that. Great :-) Now I can get rid of the height in my tables as well.

Cheers