AnyLink Drop Down Menu - Curved!

**oriole** · 03-03-2006, 06:13 PM

I am trying to create a drop down menu on a curved nav. I added the "Anylink Drop Down Menu" code to a DIV and set the z-index so that the header image would always stay on top.

I am trying to get the menu to pop down under the curve. I have been successful in that the menu appears cross-browser, but my problem is that IE and FireFox (curse those browser differences!) place the drop down menu in different places vertically.

Here is my development page.
http://barleans.quexion.com
Mouse over "About Us" to see the menu. Currently it looks great in FireFox and is way too low in IE.

If I change the alignment so that IE shows correctly, then FireFox bumps it up too high. I figure perhaps adding some code such as "if FireFox, do ..." ? would fix it.

Any ideas?

Thanks so much in advance,

Deb

**jscheuer1** · 03-03-2006, 08:18 PM

Well, you have not carried out the menu to its logical conclusion (by adding in the other submenus). If you do, this fix may not work for all drop downs but, I found that using this:

Code:

dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+(ie4&&!window.opera? 0 : obj.offsetHeight)+"px"

instead of this:

Code:

dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"

did the trick for that one drop down in both browsers.

Notes: I have reservations about the page in general, it has no DOCTYPE so renders differently in FF and IE to begin with. Using a minimal DOCTYPE like:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

will allow you to design a more uniform looking page, once that is done, this problem may no longer exist although, simply adding the DOCTYPE does not fix it, I checked already.

**oriole** · 03-03-2006, 08:26 PM

John,

Thank you so much! I also figured out a way to fix it: I moved style="position:relative" into the image tag rather than the div tag. That bumped it up perfectly for both browsers.

Edit: I lost the rollovers in the drop downs with my fix.

Deb

**oriole** · 03-03-2006, 10:52 PM

http://barleans.quexion.com/

There is something wrong with the margin-top attribute in my stylesheet. If I don't give the #dropmenudiv a margin-top, then the entire menu is functional but too low on the page. If I add margin-top: -67px; which puts it in the right place, I lose my drop down link and rollover functionality after the first menu option.

I am pretty frustrated... can anyone help?

Thread: AnyLink Drop Down Menu - Curved!

Thread Tools

Search Thread

AnyLink Drop Down Menu - Curved!

Bookmarks

Bookmarks

Posting Permissions