JS mega dropdown going behind JS slideshow

[ohiwastedmylife]

Hello I am having a difficult issue with my mega dropdown menu hiding behind my slideshow. I have tried adjusting Z index in both the CSS and JS files and nothing seems to work. Link to the page I am working on... http://www.insta-promotions.com/Pages/index4.php

any help would be greatly appreciated !

[jscheuer1]

Your copy of jquery.hoverIntent.js has been altered or has become corrupt. Replace it with a fresh copy.

[ohiwastedmylife]

Thanks for the reply. I replaced / updated all the .js files and the issue is still present. Is there anything else you think it could be? I have tried multiple .js sliders and they all have this same issue.

[jscheuer1]

People like you shouldn't be allowed near CMS or PHP. Just kidding. But I think there's some kind of CMS and/or PHP nightmare going on here. The page has 3 DOCTYPE declarations, 3 opening html tags, three heads, and three body tags.

Only one of each are allowed. This probably occurred because of PHP includes, perhaps as part of a CMS. However it happened, it should be fixed, and things should be arranged so that all scripts and styles are in the head of the page and all markup in the body.

That said, there doesn't appear to be any problem with z-index here, and the state of affairs described above doesn't appear to be a major problem, at least not in Firefox 6.1 - other browsers might not be as able to error correct all that.

The main problem with the script is that you have two copies of jQuery on the page:


<script type="text/javascript" src="../Javascript/mega_menu/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../Javascript/mega_menu/jquery.hoverIntent.js"></script>
<script type="text/javascript" src="../Javascript/mega_menu/jquery.hovermini.js"></script>
<script type="text/javascript"> $(document).ready(function() {


function megaHoverOver(){
$(this).find(".sub").stop().fadeTo('fast', 1).show();

//Calculate width of all ul's
(function($) {
jQuery.fn.calcSubWidth = function() {
rowWi . . .

and:


. . . </div>

</div>



</div>




<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

<script type="text/javascript">



$(document).ready(function() {



//Set Default State of each portfolio piece

$(".paging").show();

$(".paging a:first").addC . . .

You only need one. Get rid of the second one and the menu works, at least in Firefox 6.1.

[ohiwastedmylife]

You sir are a savior! That was the one thing I was going to try this weekend. The page does appear to be a mess but that is only because of PHP includes. The actual index file is much cleaner. The site was also a disaster earlier tonight because I tried fixing something while in class that a programmer had suggested and it went downhill from there. I learned HTML / CSS/ PHP / JS last week so I am sure it is not going to be the best work out there :). Thank you ! My next step will be to figure out how to refine the includes.

[jscheuer1]

Great!

Um to fix up the page visa vis its includes it might be helpful to think of the index page as the 'top' page. Only the top page should have a DOCTYPE, html, head, and body. In its head should be the meta tags and the title tag. The includes can go into the head of the top page below its title tag, or into the body of the top page and should not have any of those tags on them. If they go into the head, they should have only script and link tags on them. They could also have style tags. If they go into the body, they can have script tags, but if possible avoid that. What they should have are div, p, a, table, img, etc. tags, the normal element tags of presentational HTML markup.

And you can always check your work by viewing the top page in the browser and using the browser's 'view source' to see what the page actually looks like once assembled (the served source code).

It can be helpful to have comments at the beginning and the end of each include page that identify it:


<!-- Begin Include 1 -->
put whatever you need for this include here
<!-- End Include 1 -->

That way when you view them in the served source code of the top page you will clearly see where each include begins and ends.

When viewed in the browser, the top page needs to be valid HTML code. The includes do not, they shouldn't be in fact. Their code should be valid, but not as a standalone page. They should each represent only a fragment or piece of a page.