HTML Tables IE Help

[nasaboy007]

HTML Tables IE Help - ***NP$ REWARD***

I'm designing a site and I have it coded with tables. Now I don't want a whole speech as to why I should have used CSS rather than tables or anything, I simply want the answer to my question.

Problem: there is a random break in between two of my tables. It's quite strange because i have multiple tables just like this, and there are no breaks in between them.

Here is a screenshot of the problematic part:

http://img220.imageshack.us/img220/4521/layouterror1cq.jpg

Here is a live version of the problematic page (problem only occurs in IE, other browsers it looks fine):

http://nasaboy007.t35.com/resize/


The problem is the little blue line that lies right under the buttons (with home, etc) and above that black-on-the-left/blue-bar-thing-on-the-right. that should not be there. this page shows up fine in all Mac version browsers (Safari, Firefox, Internet Explorer) and it shows up fine in Windows Firefox, but the line appears in Windows Internet Explorer. I just can't seem to find out what could be wrong with the code that could mess it up. Here is the snippet of the code that the error "seemingly" appears.

<table width="95%" border="0" cellspacing="0" cellpadding="0" align="center" background="img/between.gif">
  <tr>
  	  <td class="bordervert"></td>
	  	<td width="18">
		<img src="img/head2.gif">
	</td>
	<td width="84">
		<img src="img/head3.gif">
	</td>
	<td width="86">
		<img src="img/head4.gif">
	</td>
	<td width="86">	
		<img src="img/head5.gif">
	</td>
	<td width="86">
		<img src="img/head6.gif">
	</td>
	<td width="86">
		<img src="img/head7.gif">
	</td>
	<td width="86">
		<img src="img/head8.gif">
	</td>
	<td width="86">
		<img src="img/head9.gif">
	</td>
	<td width="85">
		<img src="img/head10.gif">
	</td>
	<td><div class="space">hi</div>
	</td>
	<td width="3">
		<img src="img/head11.jpg">
	</td>
	<td class="bordervert">
	</td>
  </tr>
  </table>
<!-- This comment is not in the HTML page, but according to the page, it would be somewhere around here. -->
<table width="95%" height="10" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
  	<td class="bordervert" height="10"></td>
    <td class="sidebartop" height="10"></td>
    <td class="hash" height="10"><div class="space">hi</div></td>
	<td class="bordervert" height="10"></td>
  </tr>
</table>

See anything wrong with the above code that would trigger only in IE?


First person to solve this and make it work in all browsers (PC: IE, FF; Mac: Safari, IE, FF) will get 10 NP$.
Thanks.

 

[nasaboy007]

*BUMP*

cmon guys this is urgent and id really appreciate some help.

ok how bout an incentive...

10 NP$ to whoever can solve this problem and make it so that it works on all 5 main browsers (PC: IE, FF; Mac: Safari, IE, FF)

 

[stscac]

Can you give a URL that I can see this live?

Thanks

-Steve

 

[nasaboy007]

uploaded for live example:

http://nasaboy007.t35.com/resize/


see the line of blue (same shade as background) right below the buttons.

 

[nasaboy007]

*bump*

Please help, I would be very grateful.

50 NP$ to answerer.

 

[170designs]

This problem has been designers for ages but there is a solution and a reason, in IE. The reason is that in your code, you have for example,

<td class="bordervert"></td>
<td width="18">
<img src="img/head2.gif">
</td>

but it should be

<td class="bordervert"></td>
<td width="18"><img src="img/head2.gif"></td>

... meaning everything, in the code, has to be on ONE line, not 3, like you have it now. Fix this everywhere you have the </td> NOT on the same line as the <td> and it will fix your problem.


- Matt

 

[nasaboy007]

holy... *@#&$*@#&$^


WOW IE SUCKS

man thanks for the solutions. rep added and NP$ donated

 

[170designs]

Sure, no problem

Matt