HTML/Browser Problem

[Rconsole]

This is what my menu looks like in Firefox:

and this is what it looks like in IE(Internet Explorer):

Here is my code for that for the entire page:

<table width="600" border="0" cellspacing="0" cellpadding="5" align="center">
<tr>
<td colspan="2">
<table border="0" cellpadding="0" cellspacing="0">
<center>
<img src="banner.jpg" alt="884 Dundee" border="0" name="banner">
</center>
</table>
</td>
</tr>
<tr>
<td valign="top" rowspan="2">
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#BF8F8F" width="61" height="190" >
<td>
<img src="top.gif" alt="" border="0" name="top">
<a href="home.html" target="main" onMouseOver="document.home.src='home2.gif'" onMouseOut="document.home.src='home.gif'"><img src="home.gif" alt="" border="0" name="home">
</a>
<a href="gallery.html" target="main" onMouseOver="document.gallery.src='gallery2.gif'" onMouseOut="document.gallery.src='gallery.gif'"><i mg src="gallery.gif" alt="" border="0" name="gallery">
</a>
<a href="contract.html" target="main" onMouseOver="document.contract.src='contract2.gif' " onMouseOut="document.contract.src='contract.gif'"> <img src="contract.gif" alt="" border="0" name="contract">
</a>
<a href="contact.html" target="main" onMouseOver="document.contact.src='contact2.gif'" onMouseOut="document.contact.src='contact.gif'"><i mg src="contact.gif" alt="" border="0" name="contact">
</a>
<img src="bottom.gif" alt="" border="0" name="bottom">
</td>
</table>
</td>
</tr>
<tr>
<td width="537" valign="middle">
<table width="472" height="550" border="0" cellspacing="0" cellpadding="5" align="center" bgcolor="#BF8F8F" bordercolor="#BF8F8F">
<tr>
<td valign="top">
<iframe src="home.html" name="main" width="472" height="550" frameborder="0"></iframe>
</td>
</tr>
</table>
</td>
</tr>
</table>

What is in red is the code for the Menu, all the stuff inside the link tag is for the Mouseover/image change thing
Anyway my problem is that I have those spaces between the images in IE and there is some bar underneath the menu that I can't get rid of can anybody help me out?

[Pheonix]

<i mg src="gallery.gif" alt="" border="0" name="gallery"> should be
<img src="gallery.gif" alt="" border="0" name="gallery">

I see the same problem twice, not sure if thats the reason for the error

Personaly I would use css for this same effect tho, but i'm crazy like that

[sypher]

for the bottom.gif add valign="bottom" Also try compacting the code more by making everything about each button on one line. This may get rid of the small lines in between each image

[Rconsole]

No Luck

Thanks for trying though, Pheonix, could you point me in the direction of the css code for the MouseOver stuff, it would be greatly appreciated.

[zombbb]

Hello,
You can try to optimize with xhtml tags.
like syntax, id for name atribute of img tags, like:
<img src='../../sdf.gif' name='name' id='name' />
Additional you may use some css for your table borders.
Of cource all that you can find at w3schools dot com

Regards
www.takedom.com

[Rconsole]

I'm not sure what you mean by optimize

[benbramz]

he gave an example, it does no optimising though. just a differnt way of writing it