Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

Troubleshooting
Research
Professional Opinions
Ask a Question
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

troubleshooting Question

Suckerfish Menu Issue in IE-8.

Avatar of 23-degrees
23-degreesFlag for United States of America asked on
Web DevelopmentWeb BrowsersScripting 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>
ie-8.png
ASKER CERTIFIED SOLUTION
Avatar of irocwebs
irocwebs

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

Commented:
This problem has been solved!
Unlock 1 Answer and 5 Comments.
See Answers