Sucker Tree Menu Browser Compatibility [Archive]

damnitsux2bu

06-27-2010, 10:04 PM

1) Script Title: Sucker Tree Menu

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-horizontal

3) Describe problem: I was wondering if anyone could help me get this menu to display as intended not only in IE, but in firefox, chrome and safari as well. They are all displaying it the same way (whereas it looks fine in IE). The following code is in the head:

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.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: #ADB967; /*overall menu background color*/
font-family: georgia;
}

/*Top level menu link items style*/
.suckertreemenu ul li a{
display: block;
width: 74px; /*Width of top level menu link items*/
padding: 1px 8px;
border: 2px solid #FCF8EC;
border-left-width: 4;
text-decoration: none;
color: #FCF8EC;
}

/*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 */
top: 0;
}

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

.suckertreemenu ul li a:hover{
background-color: #FCF8EC;
color: #ADB967;
text-decoration: none;
font-weight: normal;
}

/*Background image for top level menu list links */
.suckertreemenu .mainfoldericon{
background: #ADB967;
}

/*Background image for subsequent level menu list links */
.suckertreemenu .subfoldericon{
background: #ADB967;
}

* 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%;}
* html .suckertreemenu ul li ul li { float: left;}
/* End */

</style>

<script type="text/javascript">

//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)

</script>

The following is how the menu is coded in the body:

<div class="suckertreemenu">
<ul id="treemenu1">
<li><a href="index.html">   Home</a></li>
<li><a href="#">    Team </a></li>
<ul>
<li><a href="tara.html">Tara, Director</a></li>
<li><a href="peter.html">Peter, Officiant</a></li>
</ul>
</li>
<li><a href="#">Snapshots</a></li>
<ul>
<li><a href="adrianneanddaniel.html">Adrianne & Daniel</a></li>
<li><a href="amandaandnic.html">Amanda & Nic</a></li>
<li><a href="anaandjoron.html">Ana & Joron</a></li>
<li><a href="brandyandmichael.html">Brandy & Michael</a></li>
<li><a href="devonandtracy.html">Devon & Tracy</a></li>
<li><a href="erinandjoe.html">Erin & Joe</a></li>
<li><a href="jenandallen.html">Jen & Allen</a></li>
<li><a href="jenniferandbrian.html">Jennifer & Brian</a></li>
<li><a href="jennyandvaughn.html">Jenny & Vaughn</a></li>
<li><a href="karenandbilly.html">Karen & Billy</a></li>
<li><a href="lakeshiaandkevin.html">LaKeshia & Kevin</a></li>
<li><a href="lindsayandchris.html">Lindsay & Chris</a></li>
<li><a href="lisaandjosh.html">Lisa & Josh</a></li>
<li><a href="lisaandnorman.html">Lisa & Norman</a></li>
<li><a href="marlanaandchuck.html">Marlana & Chuck</a></li>
<li><a href="marneandrick.html">Marne & Rick</a></li>
<li><a href="melanieandbryan.html">Melanie & Bryan</a></li>
<li><a href="nancyandedward.html">Nancy & Edward</a></li>
<li><a href="nicoleandbeau.html">Nicole & Beau</a></li>
<li><a href="teriandjarrett.html">Teri & Jarrett</a></li>
</ul>
</li>
<li><a href="#">  Services</a></li>
<ul>
<li><a href="officiating.html">Officiating</a></li>
<li><a href="directing.html">Ceremony Directing</a></li>
<li><a href="wdm.html">Wedding Day Management</a></li>
<li><a href="decorating.html">Decorating</a></li>
</ul>
</li>
<li><a href="#">    Press</a></li>
<ul>
<li><a href="press04.html">2004</a></li>
<li><a href="press05.html">2005</a></li>
<li><a href="press06.html">2006</a></li>
<li><a href="press07.html">2007</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
</ul>
</li>
<li><a href="links.html">    Links</a></li>
</li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="contact.html"> Contact</a></li>
</li>
</ul>
</div>

In firefox, chrome and safari, the menu shows up as individual buttons, not a tree with sub-branches.

Thanks so much for your help.

Pete

ddadmin

06-28-2010, 07:10 PM

The HTML markup for your nested list is invalid. There are redundant </li>s that shouldn't be there. For example, the code in red below does not belong, and should be deleted:

<li><a href="index.html">   Home</a></li>
<li><a href="#">    Team </a></li>
<ul>
<li><a href="tara.html">Tara, Director</a></li>
<li><a href="peter.html">Peter, Officiant</a></li>
</ul>
</li>

Do this for the rest of your markup as well. You may want to run your code through a HTML validator just to make sure it's correct.

damnitsux2bu

06-28-2010, 11:34 PM

Thanks so much for that. I hate it when something little and obvious winds up tripping me up. Now I get to work on the other issues, but I really appreciate your help!!!