Suckerfish Menu Issue in IE-8.

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
23-degreesAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

irocwebsCommented:
When viewing the source of the index page it shows this:

<ul style='z-index:100;>'

instead of this:

<ul style='z-index:100;'>

Single quote is outside of the ul on all drop outs.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
23-degreesAuthor Commented:
Thanks for you reply.

I've made the Single Quote correction according to what you have suggested. But now i'm unable to keep the sub menu open on mouse hover over it after this change. Rest of the bits are unchanged and i'm testing it in IE 7, when i hover the mouse over main navigation, it pop outs the sub navigation but as soon i bring mouse pointer over any of sub menu items, the sub menu disappears in some while. Can you please let me know any clue for this issue.

To tell you that i'm having this issue only in IE 7, where as in FF there is no such problem.

Thanks and regards.
0
irocwebsCommented:
That's a whole new question. You may want to open a new thread for that one. Your first issue (Suckerfish Menu Issue in IE-8.) is considered resolved correct?

Thanks!
0
23-degreesAuthor Commented:
Got it.
0
23-degreesAuthor Commented:
Well, i've put another question titled as "Suckerfish Menu Issue in IE-8" in order to resolve the sub menu display problem. Please if you can answer that as well with reference to the code provided in this question.

Regards.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Browsers

From novice to tech pro — start learning today.