• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 621
  • Last Modified:

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
0
23-degrees
Asked:
23-degrees
  • 3
  • 2
1 Solution
 
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
 
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

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now