troubleshooting Question

Suckerfish Menu Issue in IE-8.

Avatar of 23-degrees
23-degreesFlag for United States of America asked on
Web BrowsersWeb DevelopmentScripting Languages
5 Comments1 Solution651 ViewsLast Modified:
Hi Web Experts,
I've put famous SuckerFish menu on my site http://www.asdha.org/ (main navigation on left hand side). Its being dynamically generated using <asp:repeater /> control (refer to the attached code snippet  (ID=584473).

It is working perfect in most of explorers including IE7, FF and Chrome but in IE-8 it is causing some issues (view the attached image for reference).

Please let me know of any fix for this issue?
Regards.
.sitenavdiv ul{
    font-family: arial;
    font-size: 12px;
    font-weight: bold;
    margin: 0;
    padding: 0;
    list-style-type: none;
    border-right: solid 1px #000;
    border-bottom: solid 1px #000;
    border-left: solid 1px #ffffff;
    border-top: solid 1px #ffffff;
    width: 180px; /* Width of Menu Items */
}

.sitenavdiv ul li{
    position: relative;   
    background: url('../../images/background_nav.jpg');
    background-repeat:repeat;
}
	
/*Sub level menu items */
.sitenavdiv ul li ul{
    position: absolute;
    width: 150px; /*sub menu width*/
    top: 0;
    visibility: hidden;
}

/* Sub level menu links style */
.sitenavdiv ul li a{
    border:none;
    display: block;
    overflow: auto; /*force hasLayout in IE7 */
    color: #800080;
    text-decoration: none;
    padding-left:5px; padding-right:5px; padding-top:1px; padding-bottom:1px
}

.sitenavdiv ul li a:visited{
    color: #800080;
}

.sitenavdiv ul li a:hover{
    background-color: #ffe989;
    color: #800080;
}

.sitenavdiv .subfolderstyle{
    background: url('submenuarrow.gif') no-repeat center right;
}

	
/* Holly Hack for IE \*/
* html .sitenavdiv ul li { float: left; height: 1.5%; }
* html .sitenavdiv ul li a { height: 1.5%; }
/* End */

#nav 
{
	border: 0;
}

<script type="text/javascript">
var menuids=["nav"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
	    if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
		    ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
	    else //else if this is a sub level submenu (ul)
	      ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
	    for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
	    ultags[t].style.visibility="visible"
	    ultags[t].style.display="none"
	    }
  }
}

    if (window.addEventListener)
        window.addEventListener("load", buildsubmenus, false)
    else if (window.attachEvent)
        window.attachEvent("onload", buildsubmenus)
</script>

<div class="sitenavdiv" style="padding-top:5px; padding-bottom:5px;">
<ul id="nav">
    <li><a href="Default.aspx">Home</a></li>
    <li><a href="Continuing-Education.aspx">Continuing Education</a></li>
    <asp:Repeater ID="rptMenu" Runat="server">
	    <ItemTemplate>
	        <li style="z-index:99;">
	            <a href="Get-Page.aspx?"><%# Eval("Name") %></a>
                    // this method creates the <ul /> dynamically for sub navigation
	            <%# GetSubNav((int)Eval("PageId"))%>
	        </li>
	    </ItemTemplate>
    </asp:Repeater>
    <li><a href="News-Events.aspx">News &amp; Events</a></li>
    <li><a href="Contact.aspx">Contact Us</a></li>
</ul>
</div>

Open in new window

ie-8.png
ASKER CERTIFIED SOLUTION
irocwebs

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 5 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 5 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros