Freak Firefox glitch? HTML/CSS help?

[mattyc1981]

Hi all, I've built a good deal of websites, and cannot for the life of me figure out how to fix this bug. My only thought is that the floats of the <div> tags inside the "navigation" <div> may be causing a glitch. It's just really strange because it's showing up on Firefox and not the other browsers, which is usually the opposite. Also, after running the browser compatibility, there's no reported errors.

The page was built in Dreamweaver CS4, and can be viewed at www.strikingsites.com/mypeople/home2.html. The problem is that the 'Forms' tab hover state won't work.

Here is the navigation chunk of HTML along with the CSS properties (also can check page source):

HTML:

<div id="navigation">
<div id="nav_left_side">
<div id="nav_left_spacer"></div>
<div id="nav_bar">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','about','images/v2/images/nav_about_hover.gif',1)" onmouseover="MM_nbGroup('over','about','images/v2/images/nav_about_hover.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/v2/images/nav_about.gif" alt="About" name="about" border="0" id="about" onload="" /></a></td>
<td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','contact','images/v2/images/nav_contact_hover.gif',1)" onmouseover="MM_nbGroup('over','contact','images/v2/images/nav_contact_hover.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/v2/images/nav_contact.gif" alt="Contact" name="contact" width="64" height="33" border="0" id="contact" onload="" /></a></td>
<td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','services','images/v2/images/nav_services_hover.gif',1)" onmouseover="MM_nbGroup('over','services','images/v2/images/nav_services_hover.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/v2/images/nav_services.gif" alt="Services" name="services" width="64" height="33" border="0" id="services" onload="" /></a></td>
<td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','events','images/v2/images/nav_events_hover.gif',1)" onmouseover="MM_nbGroup('over','events','images/v2/images/nav_events_hover.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/v2/images/nav_events.gif" alt="Events" name="events" width="64" height="33" border="0" id="events" onload="" /></a></td>
<td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','photos','images/v2/images/nav_photos_hover.gif',1)" onmouseover="MM_nbGroup('over','photos','images/v2/images/nav_photos_hover.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/v2/images/nav_photos.gif" alt="Photos" name="photos" width="64" height="33" border="0" id="photos" onload="" /></a></td>
<td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','forms','images/v2/images/nav_forms_hover.gif',1)" onmouseover="MM_nbGroup('over','forms','images/v2/images/nav_forms_hover.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/v2/images/nav_forms.gif" alt="Forms" name="forms" width="65" height="33" border="0" id="forms" onload="" /></a></td>
</tr>
</table>
</div>
</div>
<div id="nav_right_spacer"></div>
</div>

CSS:

#background #site_wrapper #navigation {
height: 33px;
width: 786px;
}
#background #site_wrapper #navigation #nav_left_spacer {
background-image: url(images/v2/images/nav_left_spacer.gif);
background-repeat: no-repeat;
float: left;
height: 33px;
width: 396px;
}
#background #site_wrapper #navigation #nav_bar {
height: 33px;
width: 384px;
float: left;
}
#background #site_wrapper #navigation #nav_left_side {
float: left;
height: 33px;
width: 780px;
}
#background #site_wrapper #navigation #nav_right_spacer {
background-image: url(images/v2/images/nav_right_spacer.gif);
background-repeat: no-repeat;
height: 33px;
width: 6px;
float: right;
}

//

Any help would be greatly appreciated! Thanks

 

[chadsmith]

It's working fine in Firefox 3.7

 

[pixelbypixel]

Works fine in 3.0.14, 3.5.3 too