Navigation not showing up in IE7 or 6

Any ideas on why the navigation menu is not working only in IE 7 and 6.

I can only get it to work in IE7 when I enter text right after the <td> tag which is why I have the letter H in it right now.


<td class="row1">H
<a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','images/m1_1.png',1)"><img src="images/m1_1.png" alt=" " width="145" height="49" id="Image1" /></a><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/m2_1.png',1)"><img src="images/m2.png" alt=" " width="141" height="51" id="Image2" /></a><a href="services.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/m3_1.png',1)"><img src="images/m3.png" alt=" " width="135" height="51" id="Image3" /></a><a href="gallery.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/m4_1.jpg',1)"><img src="images/m4.jpg" alt=" " width="138" height="51" id="Image4" /></a><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/m5_1.png',1)"><img src="images/m5.png" alt=" " width="156" height="51" id="Image5" /></a></td>

Without seeing the rest of the page, I can’t see anything wrong with that…

Scrap that. I can see loads wrong with it, but nothing that would cause it to go invisible.

Seriously - Javascript rollovers went out of fashion in the days of the Model T Ford. Nobody uses them any more. They are slow and clunky, and CSS does the job much more efficiently and effectively. Your images need to have some kind of text replacement, because at the moment anyone with images turned off will see nothing at all. And if you have a list of links, it should be marked up as a list. That <td> looks suspiciously like part of a layout table, and so should be shot.

I’m assuming that the images you’ve got are just the same background splash with plain text typed over the top, because that’s what people invariably do with Javascript rollovers. What you should have is something a little like this:

<ul id="nav">
<li><a href="index.html">Index</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

ul#nav li {display:inline;}
ul#nav a {background: url(normalback.png) blue no-repeat;}
ul#nav a:hover, ul#nav a:focus {background: url(highlight.png) yellow;}

This will make it semantically correct, will reduce the number of images needed from 10 to 2, will speed up the performance, improve the accessibility, ensure it works for everyone, and give you a much cleaner code base to work from.

I agree I dont like the javascript rollover just to display an image, but its from a template and I was helping someone customizing it and I wanted to avoid changing to much of the original coding since the web owner doesnt know much at all about html or css.

I was hoping for an easy quick fix for them.