Link to home
Start Free TrialLog in
Avatar of colonelblue
colonelblue

asked on

Urgent Need of Help Please - Went Live with New Nav but won't work on Some IE8 and below

Calling all experts and good souls.
Urgent need, so close to falling apart. :(

Went live and Megamenu nav won't work on some IE8 and below.
The menu bar just shows up as gray bar.
What can I do as an immediate workout solution.

Please.

A sample of how my menu is built.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
	//clean up the row of the mega menu. add css class to each element on bottom row.
	//only if more than 7 elements. if more than 16, mm-3
	jQuery('#nav li ul').each(function(ulindex, ulele){
		$total = jQuery(this).children('li').size();
		if ($total <= 7) {
			jQuery(this).addClass('mm-1');
		}
		else {
			$cols = Math.floor(($total) / 12) + 1;
			$remainder = $total % $cols;
			$rows = Math.ceil($total / $cols);
			jQuery(this).addClass('mm-' + $cols + ' total-' + $total + ' rem-'+$remainder );
			
			jQuery(this).children().each(function(liindex, liele){
				//alert("total: "+$total+", remainder: "+ $mod+", ulindex: "+ulindex+", liindex: "+liindex);
				//If your number X falls between A and B, and you would like to convert it to Y which falls between C and D follow this formula: Y = (X-A)/(B-A) * (D-C) + C.
				jQuery(this).addClass('col-' + Math.floor((liindex / $total * $cols)+1) );
				if( (liindex+1) % $rows == 0) {
					jQuery(this).addClass('last');
				}
			});
		
			for (var colcount = 1; colcount<= $cols; colcount++){
				jQuery(this).children('.col-'+colcount).wrapAll('<div class="col" />');
			}
		}
	});	
});
</script>
<style type="text/css">
html, body { margin:0; padding:0; }
ul {
	list-style: none;
	color: #F00;
}

/********** < Navigation */
.nav-container {
	float: left;
	width: 960px;
	background-color: #999999;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-transform: capitalize;
	margin-right: 0;
	margin-bottom: 0em;
	margin-left: 0;
}
#nav {
	border: 0px none;
	margin: 0;
	font-size: 13px;
	font-weight: bold;
	color: #039;
	padding-top: 3px;
	padding-right: 0;
	padding-bottom: 2px;
	padding-left: 5px;
}

/* All Levels */
#nav li {
	text-align: left;
	position: relative;
	font-weight: bold;
}
#nav li.over {
	z-index: 999;
	color: #F00;
}
#nav li.parent {
	color: #F00;
}
#nav li a {
	display: block;
	text-decoration: none;
	color: #F00;
}
#nav li a:hover {
	text-decoration: none;
	background-color: #F93;
	color: #F90;
}
#nav li a span { display:block; white-space:nowrap; cursor:pointer; }
#nav li ul a span { white-space:normal; }
#hello {
	float: left;
	clear: none;
	margin-top: 15px;
	padding-top: 15px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 10px;
	margin-left: 10px;
}

/* 1st Level */
#nav li {
	float: left;
}
#nav li a {
	float: left;
	padding: 5px 10px;
	font-weight: bold;
	color: #fff;
	text-shadow: 1px 1px #1b3f00;
	font-size: 12px;
	text-transform: capitalize;
}
#nav li a:hover { color: #fff; text-shadow: 1px 1px 3px #ccc; }
#nav li.over a,
#nav li.active a { color:#fff; }

/* 2nd Level */
#nav ul {
	position: absolute;
	width: 15em;
	top: 22px;
	left: -10000px;
	/* border: 1px solid #1b3f00;  */
	/* border-width: 0 1px 2px 1px;  */
	padding: 6px 0 26px;
	background-color: #CCC;
	text-align: center;
	width: 200px;

	
	
}
#nav ul div.col { float:left; width: 15em; }
#nav ul li { float:left; padding: 0; width: 15em; }
#nav ul li a {
	float: none;
	font-weight: bold;
	color: #FFF !important;
	text-shadow: 1px 1px #1b3f00;
	/* border-bottom: 1px solid #1b3f00; */
	background-color: #CCC;
	margin-left: 5px;
	padding-top: 6px;
	padding-right: 9px;
	padding-bottom: 6px;
	padding-left: 9px;
	font-family: Verdana, Geneva, sans-serif;
}
.listHeader {
	float: left;
	width: 15em;
	color: #FF3 !important;
	text-shadow: 1px 1px #1b3f00;
	/* border-bottom: 1px solid #1b3f00; */
	font-weight: bold;
	background-color: #999;
	padding-top: 6px;
	padding-right: 2px;
	padding-bottom: 6px;
	padding-left: 11px;
	display: block;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10px;
}

#nav ul li a:hover {
	color: #999 !important;
	text-shadow: 1px 1px 3px #ccc;
	font-family: Verdana, Geneva, sans-serif;
	background-color: #FFF;
	font-weight: bold;
}
#nav ul li.last > a { border-bottom:0; }
#nav ul li.last.parent > a { border-bottom:0; }
#nav ul li.over > a  {
	font-weight: normal;
	color: #fff !important;
	background-color: #999;
}
#nav ul.mm-1 { width: 15em; }
#nav ul.mm-2 { width: 30em; }
#nav ul.mm-3 { width: 45em; }
#nav ul.mm-4 { width: 60em; }
/* 3rd+ leven */
#nav ul ul { top:-6px; background: #69F; }
/* Show Menu - uses built-in magento menu hovering */
#nav li.over > ul { left:0; }
#nav li.over > ul li.over > ul { left:14em; }
#nav li.over ul ul { left:-10000px; }

/* Show Menu - uses css only, not fully across all browsers but, for the purpose of the demo is fine by me */
#nav li:hover > ul { left:0; z-index: 100; }
#nav li:hover > ul li:hover > ul { left:14em; z-index: 200; }
#nav li:hover ul ul { left:-10000px; }

/********** Navigation > */
/* ======================================================================================= */
#searchbar {
	width: 960px;
	height: 90px;
	background-color: #6699CC;
	margin: 0px;
	padding: 0px;
	display: none;
}

</style>
</head>
<body>
<div class="nav-container">
  <ul id="nav">
    <li><a href="#">HOME</a></li>
           <li class="level0 nav-1 parent" > <a href="/#"><span>link</span></a>
        <ul class="level0">
         
          <li><span class="listHeader">HEADER</span> </li>
          <li class="level1 nav-1-2"> <a href="#"><span>link</span></a> </li>
          <li class="level1 nav-1-3"> <a href="#"><span>link</span></a> </li>
          <li class="level1 nav-1-4"> <a href="#p"><span>link</span></a> </li>
          <li class="level1 nav-1-5"> <a href="#"><span>link</span></a> </li>
          <li class="level1 nav-1-6"> <a href="#"><span>Clink</span></a> </li>
          <li class="level1 nav-1-7"> <span></span></a> </li>
       
          
          <li><span class="listHeader">link</span> </li>
          <li class="level1 nav-1-10"> <a href="#"><span>link</span></a> </li>
          <li class="level1 nav-1-11"> <a href="#"><span>link</span></a> </li>
          <li class="level1 nav-1-12"> <a href="#"><span>link</span></a> </li>
          <li class="level1 nav-1-13"> <a href="#"><span>link</span></a> </li>
          <li class="level1 nav-1-14"> <a href="#"><span>link</span></a> </li>
          <li class="level1 nav-1-15"> <a href="#><span>link</span></a> </li>
         
      
          
           <li><span class="listHeader">link</span> </li>
          <li class="level1 nav-1-18"> <a href="#category-one/r"><span>link</span></a> </li>
          <li class="level1 nav-1-19"> <a href="#category-one/s"><span>link</span></a> </li>
          <li class="level1 nav-1-20"> <a href="#category-one/t"><span>link</span></a> </li>
          <li class="level1 nav-1-21"> <a href="#category-one/u"><span>link</span></a> </li>
          <li class="level1 nav-1-22"> <a href="#category-one/v"><span>link</span></a> </li>
                   <li class="level1 nav-1-22"> <a href="#category-one/v"><span>link</span></a> </li>
          
           <li><span class="listHeader">link</span> </li>
          <li class="level1 nav-1-19"> <a href="#" target="_blank" ><span>link</span></a> </li>
          <li class="level1 nav-1-20"> <a href="#" target="_blank" ><span>link</span></a> </li>
          <li class="level1 nav-1-21"> <a href="#" target="_blank" ><span>link</span></a> </li>
          <li class="level1 nav-1-22"> </li>
          <li class="level1 nav-1-23"> </li>
               </ul>
      </li>

    <li class="level0 nav-1 parent" > <a href="#category-one"><span>link</span></a>
        <ul class="level0">
          <li><span class="listHeader">HEADER</span> </li>
          <li class="level1 nav-1-2"> <a href="#"><span>link</span></a> </li>
          <li class="level1 nav-1-3"> <a href="#"><span>link</span></a> </li>
          <li class="level1 nav-1-4"> <a href="#"><span>link</span></a> </li>
          <li class="level1 nav-1-5"> <a href="#"><span>link</span></a> </li>
          <li class="level1 nav-1-6"> <a href="#"><span>link</span></a> </li>
          <li class="level1 nav-1-7"> <a href="#"><span>link</span></a> </li>
          <li class="level1 nav-1-8"> <a href="#"><span>link

</span></a> </li>
          <li class="level1 nav-1-9"> <a href="#"><span>link</span></a> </li>
          <li class="level1 nav-1-10"> <a href="#"><span>link</span></a> </li>
          <li><span class="listHeader">HEADER</span> </li>
          <li class="level1 nav-1-12"> <a href="#"><span>link</span></a> </li>
          <li class="level1 nav-1-13"> <a href="#"><span>link</span></a> </li>
          <li class="level1 nav-1-14"> <a href="#"><span>link</span></a> </li>
          <li class="level1 nav-1-15"> <a href="#t"><span>link</span></a> </li>
          
       
             
          <li><span class="listHeader">HEADER</span> </li>
          <li class="level1 nav-1-17"> <a href="#"><span>link</span></a> </li>
          <li class="level1 nav-1-18"> <a href="#><span>link</span></a> </li>
          <li class="level1 nav-1-19"> <a href="#"><span>link</span></a> </li>
          <li class="level1 nav-1-20"> <a href="#"><span>link</span></a> </li>
          <li class="level1 nav-1-21"> <a href="#"><span>link</span></a> </li>
          <li class="level1 nav-1-22"> <a href="#"><span>link</span></a> </li>
          <li class="level1 nav-1-23"> <a href="#"><span>link</span></a> </li>
                    <li class="level1 nav-1-23"> <a href="#"><span>link</span></a> </li>
               <li><span class="listHeader">HEADER</span> </li> 
                <li class="level1 nav-1-24"> <a href="#"><span>link</span></a> </li>
          <li class="level1 nav-1-25"> <a href="#"><span>link</span></a> </li>
          <li class="level1 nav-1-26"> <a href="#"><span>link</span></a> </li>    
                     
      </ul>
      </li>
  </ul>
      </li>
    </ul>
  </div>

  
</body>
</html>
                                            

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of colonelblue
colonelblue

ASKER

Hello Dave.
I apologize for the late reply.
Hope you still don't mind taking a look.
I have the nav show up on IE7 but all the submenus do not flush to the left.
Is there a chance you can view it under IE7?

Thank you
In IE7, it doesn't look so good.  Not everything on the submenus shows either.
Hello Dave, do oyu think I could find a workaroun or would I have to resort to what I was thinking of a browser detect and if it's below IE8 forward to an upgrade page?

Better yet. The menu is an asp classic include. Is there a way to detect the browser version and if IE7 load a downgraded menu with just standard links ?

Thanks again.
I don't know.  I've never tried to do that.
I didn't get the solution I needed but definitely an A for effort.
Thank you Dave.