Firefox alignment problem

Poster: Alan
Dated: Friday November 3 2006 - 4:43:09 GMT

Hi,

My menu is working in IE6 and IE7 ok. In Firefox the menu has a vertical alignment problem.

I have tried removing the overfilter but that does not make a difference the menu is still misaligned in Firefox.

Any help in fixing the problem would be greatly appreciated.

http://www.alunablue.com/menu/Menu_Top_01.htm

Thanks!

Poster: John
Dated: Monday November 6 2006 - 14:32:44 GMT

I'm getting a 404 when trying your link.

Poster: travelnurses
Dated: Monday November 6 2006 - 21:52:00 GMT

Same problem with my site, http://www.travelnursesnow.com

Poster: Ruth
Dated: Saturday November 11 2006 - 18:47:40 GMT

Can you be more specific on the issue? What is the vertical align problem? I am looking at your site and it looks the same in IE5.5, 6, FF 1.0.5, 1.5

Ruth

Poster: vikenk
Dated: Tuesday November 14 2006 - 18:10:57 GMT

Ruth,

If you go to http://www.travelnursesnow.com, you can see that the submenu seems to be dropping down from the middle of the menu (as opposed to being right underneath the menu) and partially obscures the menu text. This seems to happen in Firefox only.

In IE, the submenu opens up underneath the Main Menu. I have looked at this one before and have not been able to figure it out. I thought it may have to do with the shadow/overfilter pixels, but that does not seem to be the case.

Poster: Ruth
Dated: Tuesday November 28 2006 - 1:43:22 GMT

Hi,

The problem is the offsets that you are using from the image for placement of the popup menu. Also, when you change font size, and all browsers allow users to do that [IE if they have accessiblity set for it] using that image way at the top and the offsets for the normal font sizing will not work, it makes the offsets even worse.

The fix for this is to use an image right below the div that contains the item that will open the pop menu. I haven't done this much so I made a different image for each menu. Make two 1x1px transparent images and place them after the closing div but inside the td cell for each item that opens a pop menu. Then set your offsets from there. This will also keep the menu pretty well placed when font size is changed.

In mine I named the images miloffset.gif and milloffset1.gif and then used id=miloffset name=miloffset and the same for the second using the milloffset1. See the following example.



This works in both IE, NN, FF even with font size increased 400%. That is because the image is below the text where as in what you now have the image is above the text and that means that the offset will not be correct when font size is increased.

Hope this helps.

Ruth