Javascript drop-down menu display error in IE7

[atzaman]

Hi all.

I currently have an issue where a javascript drop-down menu I have is displaying below the javascript slide show I have on the same page.

I know this issue has something to do with the slideshow part having position:relative but how do I fix it?

Works fine on all browsers including IE8 but not on browser IE7 (or lower).

Here's all the code that I think is relevant. If anyone is able to help I'd be very grateful. My knowledge of Javascript is quite limited :(

Thanks

Slide show HTML

<div class="main_view">
    <div class="window">

        <div class="image_reel">
        
            <a href="#"><?  include("templates/guest-home-banner1.tpl"); ?></a>
            <a href="#"><?  include("templates/guest-home-banner2.tpl"); ?></a>
            <a href="#"><?  include("templates/guest-home-banner3.tpl"); ?></a>

        </div>
    </div>
    
    <div class="paging">
      <a href="#" rel="1">How it works</a>
      <a href="#" rel="2" style="margin:0 3px 0 3px;">Our Retailers</a>
      <a href="#" rel="3">In the Press</a>
    </div>

</div>

Slide show CSS

/*--Main Container--*/
.main_view {
	position: relative;
}
/*--Window/Masking Styles--*/
.window {
	height:253px;	width: 660px;
	overflow: hidden; /*--Hides anything outside of the set width/height--*/
	position: relative;
}
.window a:hover {
	text-decoration:none;
}
.image_reel {
	position: absolute;
	top: 0; left: 0;
	width: 2640px;
}

.image_reel a:hover {
	text-decoration:none;
}

Slideshow Javascript

<script type="text/javascript">

$(document).ready(function() {

	//Set Default State of each portfolio piece
	$(".paging").show();
	$(".paging a:first").addClass("active");
	
	//Paging + Slider Function
	rotate = function(){	
		var triggerID = $active.attr("rel") - 1; //Get number of times to slide
		var image_reelPosition = triggerID * 660; //Determines the distance the image reel needs to slide
    
		$(".paging a").removeClass('active'); //Remove all active class
		$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
		
		//Slider Animation
    $('.image_reel').animate({opacity: 0.25}, 300);
    $('.image_reel').animate({ left: -image_reelPosition }, 10);
    $('.image_reel').animate({opacity: 1}, 250);
		
	}; 
	
	//Rotation + Timing Event
	rotateSwitch = function(){		
		play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
			$active = $('.paging a.active').next();
			if ( $active.length === 0) { //If paging reaches the end...
				$active = $('.paging a:first'); //go back to first
				clearInterval(play); //Stop the rotation
			}
			rotate(); //Trigger the paging and slider function
		}, 6000); //Timer speed in milliseconds
	};
	
	rotateSwitch(); //Run function on launch	
	
	//On Click
	$(".paging a").click(function() {	
		$active = $(this); //Activate the clicked paging
		//Reset Timer
		clearInterval(play); //Stop the rotation
		rotate(); //Trigger rotation immediately
		return false; //Prevent browser jump to link anchor
	});
	
});
</script>

Navigation menu HTML (just a small part of it)

<div>
  <ul id="topnav">
    <li>
      <a href="../../entertainment/" class="entertainment">Entertainment</a>
      <div class="sub subentertainment">
        <div class="row">
          <ul>
            <li><h2><a href="../../entertainment/">Entertainment</a></h2></li>
            <li><a href="../../entertainment/books-magazines/">Books &amp; Magazines</a></li>
          </ul>
          <ul>
            <li><h2><a href="#">Highlights</a></h2></li>
            <li><a href="../../merchant/?site=The Book Depository">The Book Depository</a></li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
</div>

Navigation menu CSS

ul#topnav {
	margin: 0; padding: 0;
	float:left;
	width: 100%;
	list-style: none;
	font-size: 1.1em;
}

ul#topnav li {
	float: left;
	margin: 0; padding: 0;
	position: relative; /*--Important--*/
}

ul#topnav li a {
	float: left;
	text-indent: -9999px; /*--Push text off of page--*/
	height: 33px;
	margin-right:2px;
}

ul#topnav li:hover a, ul#topnav li a:hover { background-position: left bottom; } /*--Hover State--*/

ul#topnav a.entertainment {
	background: url(../images/tabs/entertainment.gif) no-repeat;
	width: 115px;
}

Navigation menu Javascript

<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() {
				rowWidth = 0;
				//Calculate row
				$(this).find("ul").each(function() {					
					rowWidth += $(this).width(); 
				});	
			};
		})(jQuery); 
		
		if ( $(this).find(".row").length > 0 ) { //If row exists...
			var biggestRow = 0;	
			//Calculate each row
			$(this).find(".row").each(function() {							   
				$(this).calcSubWidth();
				//Find biggest row
				if(rowWidth > biggestRow) {
					biggestRow = rowWidth;
				}
			});
			//Set width
			$(this).find(".sub").css({'width' :biggestRow});
			$(this).find(".row:last").css({'margin':'0'});
			
		} else { //If row does not exist...
			
			$(this).calcSubWidth();
			//Set Width
			$(this).find(".sub").css({'width' : rowWidth});
			
		}
	}
	
	function megaHoverOut(){ 
	  $(this).find(".sub").stop().fadeTo('fast', 0, function() {
		  $(this).hide(); 
	  });
	}


	var config = {    
		 sensitivity: 20, // number = sensitivity threshold (must be 1 or higher)    
		 interval: 20, // number = milliseconds for onMouseOver polling interval    
		 over: megaHoverOver, // function = onMouseOver callback (REQUIRED)    
		 timeout: 10, // number = milliseconds delay before onMouseOut    
		 out: megaHoverOut // function = onMouseOut callback (REQUIRED)    
	};

	$("ul#topnav li .sub").css({'opacity':'0'});
	$("ul#topnav li").hoverIntent(config);



});

</script>

[SolidSolutions]

Do you have a link we could check?

Also, it is displaying below the slideshow which is the problem, correct? Where should it be displayed at?

[atzaman]

Here's the link: http://www.fatcheese.ie/

The menu is displaying below the slideshow.

Thanks!

[SolidSolutions]

From what I can tell, the menu is displaying above the slideshow.

What browser/version are you using that has the menu below the slideshow?

[atzaman]

As far as I can tell it's working fine on all browsers except for IE7 and below (works fine on IE8).

[SolidSolutions]

not that this is the issue, but it is an issue:

just below the alive chat code:

<span style="float:right;color:#FFFFFF;padding-top:10px;font-size:16px;font-weight:bold;">Ireland's #1 Cashback Website &nbsp;-&nbsp; <a href="../login/register.php" style="color:#FFFF00;">Join free now</a> <font style="font-size:14px;font-weight:normal;">or <a href="../login/login.php" style="color:#FFFF00;">Login</a> if you're already a member</font><span>

the closing span tag is missing the proper close tag.

<span style="float:right;color:#FFFFFF;padding-top:10px;font-size:16px;font-weight:bold;">Ireland's #1 Cashback Website &nbsp;-&nbsp; <a href="../login/register.php" style="color:#FFFF00;">Join free now</a> <font style="font-size:14px;font-weight:normal;">or <a href="../login/login.php" style="color:#FFFF00;">Login</a> if you're already a member</font></span>

[SolidSolutions]

<a href="../../electricals/computers/">Computers<a>

missing close

<a href="../../electricals/computers/">Computers</a>

[atzaman]

Thanks for pointing it out.

It appears it closed with <span> instead of </span>

EDIT: and for the <a> tag as well. Closed with <a> intsead of </a>

[SolidSolutions]

<tr><td style="padding-bottom:10px;text-align:right;"></td><td style="font-size:9px;padding-bottom:10px;">By clicking Join Us you indicate you have read and agreed to our <a href="../terms-conditions/" target="_blank">Terms & Conditions</a>.</td>

missing the closing </tr>

<tr><td style="padding-bottom:10px;text-align:right;"></td><td style="font-size:9px;padding-bottom:10px;">By clicking Join Us you indicate you have read and agreed to our <a href="../terms-conditions/" target="_blank">Terms & Conditions</a>.</td></tr>

[SolidSolutions]

<tr><td style="padding-bottom:10px;text-align:right;"></td><td style="padding-bottom:10px;"><input type="submit" value="Join Us" alt="Join Us" title="Join Us" /></td>

missing closing </tr>

<tr><td style="padding-bottom:10px;text-align:right;"></td><td style="padding-bottom:10px;"><input type="submit" value="Join Us" alt="Join Us" title="Join Us" /></td></tr>

[SolidSolutions]

once these tags are corrected and page updated, let me know if issue still exists (and probably does) and I'll look more.

[atzaman]

Thanks. That actually resolves another small issue I was having with IE7 but the original problem is still there.

I know it definitely has something to do with position:relative; on the div with class "window" but no idea how to fix it

[SolidSolutions]

Does the menu (id="topnav") need to be floated?
What about making the menu position: relative as well?

or making slideshow position fixed or absolute?

Any results with any of that?

[atzaman]

I tried that previous to posting on here but still have the same issue :(

When searching Google I found some results of people experiencing similar issues and someone replied to say that an iFrame element could be used although it makes it a little messy. No idea what they meant though.

[SolidSolutions]

it's hard for me since I do not have ie7.

How about removing the float: left from the menu, and making the width 99%?

[atzaman]

I don't have IE7 (I have IE8 installed) either which is why I hadnt picked up on it earlier. Just used those browser tools which give you screenshots of what it looks like on different browsers so thought it was fine.

I downloaded this tool earlier today: http://www.my-debugbar.com/wiki/IETester/HomePage

Allows you to view the page in any IE version.

[atzaman]

If anyone is able to help?

[atzaman]

Just to let everyone know I managed to fix the issue with the following on #topnov

position:relative; /*--Fix layer issue in IE7--*/
z-index:100000; /*--Fix layer issue in IE7--*/

Thanks for the help SolidSolutions :)