1 reply to this topic

[Chadi]

I am in the process of re-doing the menu on this site http://www.virtuosonetsolutions.com/

Here is the problem:

There is a grayish bar/border right below the sub-navigation (sub-nav is the one with "awards, testimonials", etc). I do not know where it is coming from.

Note this bar appears only in firefox 2, but not in IE7 oddly.

Below is a sample code from the site (all static each page)

		<tr>
			<td style="border-left: 3px solid #EAEAEA; border-right: 3px solid #EAEAEA; " height="30" background="images/nav_bg.gif">
			
 <table border="0" width="100%" id="table160" cellspacing="0" cellpadding="0" height="40">
	<tr>
		<td align="center"><font color="#FFFFFF"><span style="font-size: 8pt">
		<a href="about.htm" style="text-decoration: none"><font color="#FFFFFF">
		COMPANY</font></a></span></font></td>
		<td align="center"><font color="#FFFFFF"><span style="font-size: 8pt">
		<a href="services.htm" style="text-decoration: none">
		<font color="#FFFFFF">SERVICES</font></a></span></font></td>
		<td align="center"><font color="#FFFFFF"><span style="font-size: 8pt">
		<a href="software.htm" style="text-decoration: none">
		<font color="#FFFFFF">SOFTWARE</font></a></span></font></td>
		<td align="center"><font color="#FFFFFF"><span style="font-size: 8pt">
		<a href="network.htm" style="text-decoration: none">
		<font color="#FFFFFF">NETWORK</font></a></span></font></td>
		<td align="center"><font color="#FFFFFF"><span style="font-size: 8pt">
		<a href="https://virtuosonetsolutions.com/support" style="text-decoration: none">
		<font color="#FFFFFF">SUPPORT</font></a></span></font></td>
		<td align="center"><font color="#FFFFFF"><span style="font-size: 8pt">
		<a href="contact.htm" style="text-decoration: none">
		<font color="#FFFFFF">CONTACT</font></a></span></font></td>
		<td align="center"><font color="#FFFFFF"><span style="font-size: 8pt">
		<a href="legal.htm" style="text-decoration: none"><font color="#FFFFFF">
		LEGAL</font></a></span></font></td>
	</tr>
	</table>
			</td>
		</tr>
		<tr>
			<td style="border-left: 3px solid #EAEAEA; border-right: 3px solid #EAEAEA; ">
			
 <table border="0" width="100%" id="table161" cellspacing="0" cellpadding="0" height="30" background="images/subnav_bg.gif">
	<tr>
		<td width="30" align="center">
		<p align="right"><font color="#303030"><span style="font-size: 8pt">
		<img border="0" src="images/subnav_icon.gif" width="9" height="9"></span></font></td>
		<td align="left"><font color="#303030"><span style="font-size: 8pt">&nbsp;&nbsp;&nbsp;&nbsp;
		<a href="awards.htm" style="text-decoration: none">AWARDS</a>&nbsp;&nbsp;&nbsp;&nbsp;
		<img border="0" src="images/subnav_sep.gif" width="1" height="8">&nbsp;&nbsp;&nbsp;&nbsp;
		<a href="testimonials.htm" style="text-decoration: none">TESTIMONIALS</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<img border="0" src="images/subnav_sep.gif" width="1" height="8">&nbsp;&nbsp;&nbsp;&nbsp;
		<a href="affiliate.htm" style="text-decoration: none">AFFILIATES</a>&nbsp;&nbsp;&nbsp;&nbsp;
		<img border="0" src="images/subnav_sep.gif" width="1" height="8">&nbsp;&nbsp;&nbsp;&nbsp;
		<a href="http://virtuosonetsolutions.com/blog" style="text-decoration: none">
		BLOG</a>&nbsp;&nbsp;&nbsp;&nbsp;
		<img border="0" src="images/subnav_sep.gif" width="1" height="8">&nbsp;&nbsp;&nbsp;&nbsp;
		<a href="faq.htm" style="text-decoration: none">FAQ</a></span></font></td>
	</tr>
	</table>
			
 </td>
		</tr>
		
	</table>

This is the main/sub menu. I am not a designer/coder by trade so bear with me.

Thank you.

[Rory]

Its a cross browser problem which is why it only appears in ff2 (it also appears in IE6). That is really messy code but the best way to fix it is just experiment with lots of different possible solutions.