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!
Firefox alignment problem
-
travelnurses
- Advanced
- Posts: 12
- Joined: Tue Aug 22, 2006 9:13 pm
Same problem with my site, http://www.travelnursesnow.com
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.
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.
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
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.
Code: Select all
<TD style="BORDER-RIGHT: #ccc 1px solid"><DIV class=box>
<A onmouseover="popup('travelnursing','miloffset', 7,-5)" title="Learn More About Travel Nursing Jobs"
onmouseout=popdown() href="http://websites.milonic.com/travelnursesnow.com/travel_nursing/travel_nursing_jobs.php">Travel
Nursing Jobs</A>
</DIV><IMG src="miloffset.gif" id=miloffset name=miloffset width="1" height="1"
border="0">
</TD>Hope this helps.
Ruth