SuckerTreemenu Problems

[itsky8]

http://f18.yahoofs.com/ncp/FGIPT9r0MUQk/600x600_08051923475919099.jpg?np_____DVNuGf_JT

http://f18.yahoofs.com/ncp/FGIPT9r0MUQk/600x600_08051923480072435.jpg?np_____DoZpC9.3j

Script Title: Problems on the Menu Items

2) Script URL (on DD):

3) Describe problem:

Hello!

I have used the Menu Items from your site, but I found that the code seems has some problems, it has the Gap and Overlap problems on the sub menu items, please take a look on the attached images.

Below is my coding for your references:
menu.css
.suckertreemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.suckertreemenu ul li{
position: relative;
display: inline;
float: left;
background-color: #F3F3F3; /*overall menu background color*/
}

/*Top level menu link items style*/
.suckertreemenu ul li a{
display: block;
width: 96px; /*Width of top level menu link items*/
padding: 0px 0px;
border: 0px solid black;
border-left-width: 0;
text-decoration: none;
color: navy;
}

/*1st sub level menu*/
.suckertreemenu ul li ul{
left: 0;
position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
}

/*2nd sub level menu*/
.suckertreemenu ul li ul{
left: 0;
position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
}

/*3rd sub level menu*/
.suckertreemenu ul li ul{
left: 0;
position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul{
left: 156px; /* no need to change, as true value set by script */
top: 0;
}

/* Sub level menu links style */
.suckertreemenu ul li ul li a{
display: block;
width: 78px; /*width of sub menu levels*/
color: navy;
text-decoration: none;
padding: 0px 0px;
border: 0px solid #ccc;
}

.suckertreemenu ul li a:hover{
background-color: white;
color: white;
}

/*Background image for top level menu list links */
.suckertreemenu .mainfoldericon{
background: #F3F3F3 url() no-repeat center right;
}

/*Background image for subsequent level menu list links */
.suckertreemenu .subfoldericon{
background: #F3F3F3 url() no-repeat center right;
}

* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}

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

menu.js
//SuckerTree Horizontal Menu (Sept 14th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus_horizontal(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
}
else{ //else if this is a sub level menu (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.getElementsByTagName("a")[0].className="subfoldericon"
}
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.visibility="visible"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.visibility="hidden"
}
}
}
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus_horizontal, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_horizontal)

<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

//-->

menu.htm
<HTML><HEAD><TITLE>Top Nav Menu</TITLE>
<META http-equiv=Content-Type content="text/html; charset=UTF8">
<LINK href="2c_css/menu.css" type=text/css rel=stylesheet>
<script language="JavaScript" src="js/menu.js"></script>
</head>
<BODY bgColor=#ffffff leftMargin=0 marginwidth="0" topmargin="0">

<TABLE width="96" border="0" cellPadding=0 cellSpacing=0 ID="Table1" Name="Table1">

<TR>
<TD>
<div class="suckertreemenu">
<ul id="treemenu1">

<!-- Products -->
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('imgmain','','design/main.button.jpg',1)"><img name="imgmain" id="imgmain" src="design/main.button.jpg" border="0" width="96" height="29"></a>
<ul>
<li><a href="" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('imgsub1','','design/sub.button1.on.jpg',1)"><img name="imgsub1" id="imgsub1"
src="design/sub.button1.off.jpg" border="0" width="96" height="29"></a>
<ul>
<li><a href="" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('imgsub1a','','design/sub.pencil.on.jpg',1)"><img name="imgsub1a" id="imgsub1a"
src="design/sub.pencil.off.jpg" border="0" width="78" height="29"></a></li>
<li><a href="" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('imgsub1b','','design/sub.ruler.on.jpg',1)"><img name="imgsub1b" id="imgsub1b"
src="design/sub.ruler.off.jpg" border="0" width="78" height="29"></a></li>
</ul></li>
<li><a href="" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('imgsub2','','design/sub.button2.on.jpg',1)"><img name="imgsub2" id="imgsub2"
src="design/sub.button2.off.jpg" border="0" width="96" height="29"></a>
<ul>
<li><a href="" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('imgsub2a','','design/sub.notepad.on.jpg',1)"><img name="imgsub2a" id="imgsub2a"
src="design/sub.notepad.off.jpg" border="0" width="78" height="29"></a></li>
<li><a href="" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('imgsub2b','','design/sub.memo.on.jpg',1)"><img name="imgsub2b" id="imgsub2b"
src="design/sub.memo.off.jpg" border="0" width="78" height="29"></a></li>
</ul></li>

</ul></li>
<!-- Producst -->



</ul>
</div></TD></TR>

</TABLE>

</BODY>

</HTML>

fm ITSky8

[rangana]

Confusing!.

Your code shows Horizontal SuckerTree (http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-horizontal/)

...Your image explains the vertical suckertree (http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-vertical/).

Check your list's margins...The fix is by playing those units ;)

...Also, if nothing works, could you provide a link to your page :)

[itsky8]

Hello! Rangana,

Thanks for your reply, it's nothing confusing, as I just show you one menu item, it's in the horizontal manner.

http://itsky8web.googlepages.com/navmenu.htm

[rangana]

See if changing your menu.css helps:


.suckertreemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.suckertreemenu ul li{
position: relative;
display: inline;
float: left;
line-height:12px;
/*background-color: #F3F3F3; /*overall menu background color*/
}

/*Top level menu link items style*/
.suckertreemenu ul li a{
display: block;
width: 96px; /*Width of top level menu link items*/
padding: 0px 0px; /*I modified, original 0 0 ---------------------------------------------*/
border: 0px solid black;
border-left-width: 0;
text-decoration: none;
color: navy;
}

/*1st sub level menu*/
.suckertreemenu ul li ul{
left: 0;
position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul{
left: 159px; /* no need to change, as true value set by script ----------------------------------156 */
top: 0;
}

/*********************************************
Added by rangana

/* Sub level menu links style */
.suckertreemenu ul li ul li a{
display: block;
width: 86px; /*width of sub menu levels*/
color: navy;
text-decoration: none;
padding: 0px 5px;
}

/**************************************/

.suckertreemenu ul li a:hover{
color: white;
}

/********************************Removed by rangana*******************************/
/*2nd sub level menu*
.suckertreemenu ul li ul{
left: 0;
position: absolute;
top: 1em; /* no need to change, as true value set by script *
display: block;
visibility: hidden;
}

/*3rd sub level menu*
.suckertreemenu ul li ul{
left: 0;
position: absolute;
top: 1em; /* no need to change, as true value set by script *
display: block;
visibility: hidden;
}

/*Background image for top level menu list links */
.suckertreemenu .mainfoldericon{
background: #F3F3F3 url() no-repeat center right;
}

/*Background image for subsequent level menu list links */
.suckertreemenu .subfoldericon{
background: #F3F3F3 url() no-repeat left right;
}

* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}

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


I commented my modification for you to check it yourself ;)

[itsky8]

Hello! Rangana,

Thanks for your reply, I have tested your update, but it still have the problems, please take a look on the attached images, and the updated link between the original link, thanks!

http://itsky8web.googlepages.com/Gap_Overlap.Problems.JPG
http://itsky8web.googlepages.com/Gap_Overlap.Problems.Apart.JPG
http://itsky8web.googlepages.com/Gap_Overlap.Problems.Exist.JPG

New: http://itsky8web.googlepages.com/navmenunew.htm
Old: http://itsky8web.googlepages.com/navmenu.htm

[rangana]

Oops, my bad, I forgot to mention about DTD (http://alistapart.com/articles/doctype) :)

See if adding this code right above your html tag helps:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

[itsky8]

Hello! Rangana,

Thanks for your reply! But I have tried, it still doesn't work? Why?

[rangana]

Hi itsky8,

My apologies, but I'm on my wits end. I've been working with this menu for the whole day, but then I'm not able to arrive on the solution.

Let's just wait for other members to help you out with this :)

[itsky8]

Hello! Rangana,

Thanks a lot! You did great and offered a great help. Please try your best to offer help again. Thanks!

[cmonie]

I used to have the same problem, then I did this and the problem went away.

I added a DOCTYPE to the top of my pages:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Then in the suckertreemenu CSS, I commented out
display: list-item