View Full Version : mm menu over Ultimate Fade-In Slideshow

01-29-2009, 04:22 PM
Hello all,

I was having a problem where in firefox and Chrome the mm_menus would load underneath the ultimate fade in slideshow images.

The solution I finally came across was to add:

#menuContainer {
z-index: 10000;
position: relative;

to my stylesheet. the position relative however causes a spacing issue between the rollover images and the drop down menu. on the plus side the menu is showing on top of the slideshow images now. You can see this in action right now: http://www.anzie.com

I'm grateful for any help

01-29-2009, 04:36 PM
You should validate your page and fix errors in the code, like multiple [incomplete] doctype declarations, double/nested BODY tags, document not terminated [code after ending BODY and HTML tags] etc.
In FF3 I didn't even see a menu, apart from 1 opening under COLLECTIONS, and page reported multitude of code errors in CSS.

01-29-2009, 05:09 PM
Sorry it should appear in firefox 3 now.

Im aware of all those other problems. I just inherited this code from someone else. Is there anything specifically that could be causing the "gap" between menu and rollover?

01-29-2009, 05:31 PM
Man, I don't want to be mean but reading that code makes my head hurt, badly. From what I've seen maybe this:

is a part where you specify the position of submenu, so change 20 to 10 and see how it goes.
And seriously, even if it's not yours, clean up that code. Clean code makes it easy to find and correct mistakes. The messy one can be a reason for many strange errors in different browsers, and many people here won't even start looking at the code if it's not validating [132 errors for XHTML transitional....]

01-29-2009, 05:50 PM
I'm sorry about the disgusting code I will get around to it. but its second priority right now even though it may well be what's causing the problem I'm hoping its not.

changing the value to 0 worked perfectly in firefox but in internet explorer it is too high now.. and ideas?

01-29-2009, 08:37 PM
In your styles.css:

MARGIN: 0px; COLOR: #333333; PADDING-TOP: 20px;
FONT-STYLE: normal; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #fff9e1
change that 20px to 0px. That's gonna sort out the problem with menus but will also remove the padding from body tag, so that there'll be no space between page content and top of browser window.
Now, I've tried to do it in normal way, but since your code isn't subject to normal rules :P, to have this 20px space between content and the top of the window, add this:
<div style="width:100%; height:20px;">&nbsp;</div>
under your BODY tag, I've put it under the second BODY tag in your page, like this:

<SCRIPT language=JavaScript1.2>mmLoadMenus();</SCRIPT>
<div style="width:100%; height:20px;">&nbsp;</div>
<DIV align=center>

That this page works at all is a miracle.

P.S. Please clean up your code and make sure it validates before asking further questions about it.