Nav Buttons Bar FF Glitch [Archive]

View Full Version : Nav Buttons Bar FF Glitch

Judger21

03-18-2011, 07:27 AM

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.


<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

03-18-2011, 05:10 PM

Bump . :)

--------------- Added 1300506052 at 1300506052 ---------------

Please anyone? :)

BirdOPrey5

03-19-2011, 04:21 PM

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

Judger21

03-20-2011, 03:59 AM

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

03-20-2011, 12:08 PM

Judger21

03-21-2011, 06:46 AM

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

03-21-2011, 03:27 PM

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

Judger21

03-21-2011, 03:39 PM

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

03-21-2011, 03:48 PM

Judger21

03-23-2011, 02:11 AM

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.

Lynne

03-23-2011, 02:54 AM

You didn't change it on your site, so I can't see what's wrong now. It works just fine in firebug.

Judger21

03-23-2011, 03:19 AM

You didn't change it on your site, so I can't see what's wrong now. It works just fine in firebug.

I had changed it then was messing around with some other stuff, sorry. I'll change it back!

Edit:

Lol, fixed it. My vbmenu_control class (font for navbar) font size was at 15px. I changed to 14px and that fixed it. So apparently I can only go 14 px big without editing my end images.. Unfortunate.

Thanks for all your help, Lynne. Sorry to waste your time on something so stupid..

Lynne

03-23-2011, 03:30 AM

I'm still not seeing the change at all.

Judger21

03-23-2011, 03:30 AM

Note my edit.

We're good now. Thanks again..

Lynne

03-23-2011, 03:33 AM

It isn't fixed though. It is better than it was before, but the class vbmenu_control gives the other columns 3px padding on the bottom that you are not giving the corner columns still.

Judger21

03-23-2011, 03:37 AM

Oh I see. Did I not do my last one correctly?

Lynne

03-23-2011, 04:14 PM

I don't know what you mean. I just know that you still have a 3px difference between the bottom (and top) of the main bar and the corners.

Judger21

03-23-2011, 10:33 PM

I don't know what you mean. I just know that you still have a 3px difference between the bottom (and top) of the main bar and the corners.

Yes this is true. Not as big of a deal as the other thing. I can probably fix this on my own.

Thanks again for all your help.