Nav Buttons Bar FF Glitch

[Judger21]

Hello,

I'm having issues determining what is causing a minor glitch on my website. My navigation buttons bar is a little out of line when viewing my website on FireFox. I've done a lot of modifying and I'm not sure where it happened.

I also have went through the backup code and didn't find any irregularities.

Attached is a SS of the glitch. The navbar is in line perfectly on other browsers.

Below is also my navbar code. I'm guessing it's a css issue but I'm not sure why it would affect only one browser.

<!-- nav buttons bar -->
<tr>
	<td style="border: none; padding: 0;"><table border="0" cellspacing="0" cellpadding="0" width="100%">
	<tr>
		<td width="9" align="right" valign="bottom"><img src="$stylevar[imgdir_misc]/nav_top_left.gif" width="9" height="2" border="0" alt="" /></td>
		<td width="100%" class="navbar-top-row"><img src="$vboptions[cleargifurl]" width="1" height="3" border="0" alt="" /></td>
		<td width="9" align="left" valign="bottom"><img src="$stylevar[imgdir_misc]/nav_top_right.gif" width="9" height="2" border="0" alt="" /></td>
	</tr>
	</table></td>
</tr>
<tr>
	<td class="navbar-row" align="center"><table cellpadding="$stylevar[cellpadding]" cellspacing="0" border="0" width="100%" align="center" class="navbar-row-table">
	<tr align="center" class="vbmenu_dark">
		<td width="9" align="right" style="padding: 0;"><img src="$stylevar[imgdir_misc]/nav_left.gif" width="9" height="21" border="0" alt="" /></td>
		<if condition="$show['member']">
			<td class="vbmenu_control"><a href="/index.php">Home</a></td>
			<td id="mypopupmenu" class="vbmenu_control"><a href="#mypopupmenu">Forums</a> <script type="text/javascript"> vbmenu_register("mypopupmenu"); </script></td>

Any help would be appreciated!

[Judger21]

Bump .

--------------- Added [DATE]1300506052[/DATE] at [TIME]1300506052[/TIME] ---------------

Please anyone?

[BirdOPrey5]

I don't see anything wrong with the navbar in your screenshot... ?

[Judger21]

It's a little "jagged". I've got two images on each side of the flat part of the bar, and they are a pixel lower than the middle part. If that makes sense.. You can go to http://big12beat.com and see for yourself (if on FF).

[BirdOPrey5]

I see it now... You have those <td>'s of width=9 on the very ends of that bar to do your rounded edges... In firefox your bottom line doesn't go into those end td's, but in other browsers, it does.

I would try adding class="vbmenu_control" to those two <td>'s on the ends and see what happens.

[Judger21]

Originally Posted by BirdOPrey5

I see it now... You have those <td>'s of width=9 on the very ends of that bar to do your rounded edges... In firefox your bottom line doesn't go into those end td's, but in other browsers, it does.

I would try adding class="vbmenu_control" to those two <td>'s on the ends and see what happens.

Thanks for the response.

I tried class="vbmenu_control" and it didn't really change anything. I'll attach an updated SS and what I changed the code to. I went ahead and changed it back.

<tr>
	<td style="border: none; padding: 0;"><table border="0" cellspacing="0" cellpadding="0" width="100%">
	<tr>
		<td class="vbmenu_control" width="9" align="right" valign="bottom"><img src="$stylevar[imgdir_misc]/nav_top_left.gif" width="9" height="2" border="0" alt="" /></td>
		<td width="100%" class="navbar-top-row"><img src="$vboptions[cleargifurl]" width="1" height="3" border="0" alt="" /></td>
		<td class="vbmenu_control" width="9" align="left" valign="bottom"><img src="$stylevar[imgdir_misc]/nav_top_right.gif" width="9" height="2" border="0" alt="" /></td>
	</tr>
	</table></td>
</tr>

[Lynne]

Change your "padding: 0" to "padding: 0 0 3px"

[Judger21]

Here?

<tr>
	<td style="border: none; padding: 0 0 3px;"><table border="0" cellspacing="0" cellpadding="0" width="100%">
	<tr>
		<td width="9" align="right" valign="bottom"><img src="$stylevar[imgdir_misc]/nav_top_left.gif" width="9" height="2" border="0" alt="" /></td>
		<td width="100%" class="navbar-top-row"><img src="$vboptions[cleargifurl]" width="1" height="3" border="0" alt="" /></td>
		<td width="9" align="left" valign="bottom"><img src="$stylevar[imgdir_misc]/nav_top_right.gif" width="9" height="2" border="0" alt="" /></td>
	</tr>
	</table></td>
</tr>

Result is attached.

[Lynne]

Right here where the problem image is (and the one on the other side):

<tr align="center" class="vbmenu_dark">
		<td width="9" align="right" style="padding: 0;"><img src="images/ca_evo_black/misc/nav_left.gif" width="9" height="21" border="0" alt="" /></td>
		

[Judger21]

Originally Posted by Lynne

Right here where the problem image is (and the one on the other side):

<tr align="center" class="vbmenu_dark">
		<td width="9" align="right" style="padding: 0;"><img src="images/ca_evo_black/misc/nav_left.gif" width="9" height="21" border="0" alt="" /></td>
		

Thanks again for your continued help..

This didn't work either, unfortunately. Result was the same as the above ss.