[SOLVED] Expandable tree menu question

[twilitegxa]

My question is: Why does my list show up with spaces between each listed item in Internet Explorer, but when I checked my code in Dreamweaver, everything lined up properly (i.e. Home with Getting Started right underneathe it)?

 

Here is my code for my links menu:

 

<ul id="treemenu1" class="treeview">
<li><a href="home.html" title="Home Page">Home</a></li>
<li><a title="Getting Started">Getting Started</a>
<ul>
<li><a title="Introduction">Introduction</a>
<ul><li><a href="genre1.html" title="The Magical Girl Genre">Part 1</a></li>
<li><a href="roleplaying1.html" title="What Is Role-Playing?">Part 2</a></li>
<li><a href="size.html" title="Character Size Relationship">Size Chart</a></li></ul></li>
<li><a href="creation.html" class="select" title="Character Creation">Character Creation</a>
<ul>
<li><a href="flowchart.html" title="Character Creation Flowchart">Creation Flowchart</a></li>
<li><a href="gmdiscussion.html">Step 1: GM Discussion</a></li>
<li><a href="outline.html">Step 2: Character Outline</a></li>
<li><a href="stats1.html">Step 3: Assign Stats</a></li>
<li><a href="attributes1.html">Step 4: Character Attributes</a>
<ul>
<li><a href="attributes2.html">Senshi/Knight Sub-Attributes</a></li>
<li><a href="attributes3.html">Negaverse/Dark Sub-Attributes</a></li>
<li><a href="attributes4.html">Neutral Attributes</a></li>
</ul>
</li>
<li>Step 5: Character Defects</li>
<li>Combat Value
<ul>
<li>Health Points</li>
<li>Energy Points</li>
</ul>
</li>
<li>Step 7: Background Points</li>
</ul>
</li>

<li>Chapter 3: Game Mechanics
<ul>
<li>Introduction</li>
<li>Combat Flowchart</li>
<li>Dice, Stat Checks, & Combat Rolls
<ul>
<li>Stat Checks</li>
<li>Combat Dice Rolls</li>
</ul>
</li>
<li>Taking Action</li>
<li>Combat
<ul>
<li>Initiative</li>
<li>Attack</li>
<li>Non-Combat Actions</li>
<li>Defend</li>
<li>Deliver Damage</li>
</ul>
</li>
<li>Weapons & Armor</li>
<li>Recovering Lost Points
<ul>
<li>Health Points</li>
<li>Energy Points</li>
</ul>
</li>
</ul>
</li>
<li>Chapter 4: Role-Playing In A Sailor Moon Universe
<ul>
<li>Japan & Tokyo</li>
<li>Tokyo</li>
<li>Map Of Japan</li>
<li>Places In Sailor Moon</li>
<li>Sailor Moon Timeline</li>
<li>The Moon Kingdom
<ul>
<li>The Kingdom Of Light</li>
<li>Members Of The Royal Court</li>
<li>The Planetary Kingdoms</li>
</ul>
</li>
<li>The Negaverse
<ul>
<li>What Is Known</li>
<li>Speculation On What Is Known</li>
</ul></li>
<li>Planet Of Makaiju
<ul>
<li>Campaign & Setting Questions</li>
</ul>
</li>
<li>Crystal Tokyo</li>
<li>A Crystal Tokyo Campaign</li>
<li>Nemesis, The Dark Moon</li>
<li>School life In Japan</li>
<li>Advice For The Player</li>
</ul>
</li>
</ul>
<li><a href="creationform.html">Create Character</a></li>
<li>Members
<ul>
<li>Heroes</li>
<li>Villains</li>
</ul></li>
<li><a href="newsandevents.html">News & Events</a></li>
<li><a href="glossary.html">Glossary</></li>

<li class="newgroup"><a href="#">Item Store</a></li>
<li><a href="#">Shopping Cart</a></li>
<li><a href="#">Checkout</a></li>
<li><a href="#">Your Account</a></li>

<li class="newgroup"><a href="#">About Us</a></li>
<li><a href="#">Newsletters</a></li>
<li><a href="#">Invite Friends</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact Us</a></li>
</li>

</ul>

 

Here's the CSS, in case that's part of the problem:

 

.treeview ul{ /*CSS for Simple Tree Menu*/
margin: 0;
padding: 0;
}

.treeview li{ /*Style for LI elements in general (excludes an LI that contains sub lists)*/

list-style-type: none;
padding-left: 22px;
margin-bottom: 3px;
}

.treeview li.submenu{ /* Style for LI that contains sub lists (other ULs). */

cursor: hand !important;
cursor: pointer !important;
}


.treeview li.submenu ul{ /*Style for ULs that are children of LIs (submenu) */
display: none; /*Hide them by default. Don't delete. */
}

.treeview .submenu ul li{ /*Style for LIs of ULs that are children of LIs (submenu) */
cursor: default;
}

/* Main Sailor Moon screen styles */
body {color: #99CCFF}
h1, h2, h3, h4, h5, h6 {font-family: sans-serif; color: teal}
address {color: teal; font-style: normal; font-variant: small-caps; text-align: center; clear: both; border-top: 1px solid orange}

#head {text-align: right; border-bottom: 1px solid orange}
#treemenu1 {width: 150px; float: left; background-color: rgb(212, 142, 0); margin-right: 10px; padding: 10px 10px 10px 10px; border: 2px solid black; color: white; font-size: 9pt; font-family: sans-serif}

/* when closed, width needs to be 150px and right padding 10, but when open, width needs to be 300px and right padding needs to be 20px for the Getting Started section to display properly. Ask Carson for help. */

#treemenu1 a {display: block; font-family: sans-serif; color: white; font-size: 9pt}
li.newgroup {margin-top: 15px}
#treemenu1 a:link {text-decoration: none}
#treemenu1 a:visited {text-decoration: none}
#treemenu1 a:hover {color: black; text-decoration: underline}
#treemenu1 a:active {text-decoration: none}
#main {width: 70%; float: left; border-left: 1px solid orange; padding-left: 10px}
#treemenu1 a.select {color: black; text-decoration: underline}

p {text-indent: 30pt}

a:link {color: red; font-size: 20pt}
a:visited { color: green; font-size: 20pt}
a:hover {color: magenta; font-size: 20pt}
a:active {text-decoration: none; font-size: 20pt} 
a.current {text-decoration: none}

address a:link {text-decoration: none; font-size: 14pt; color: teal}
address a:visited {text-decoration: none; font-size: 14pt; color: teal}
address a:hover {text-decoration: underline; color: black; font-size: 14pt}
address a:active {text-decoration: none; color: teal; font-size: 14pt}
address a.select {text-decoration: underline; color: black; size: 14pt}

#attributes a:link {font-size: 12pt; color: blue}

 

And here's the Javascript:

 

var persisteduls=new Object()
var ddtreemenu=new Object()

ddtreemenu.closefolder="closed.gif" //set image path to "closed" folder image
ddtreemenu.openfolder="open.gif" //set image path to "open" folder image

//////////No need to edit beyond here///////////////////////////

ddtreemenu.createTree=function(treeid, enablepersist, persistdays){
var ultags=document.getElementById(treeid).getElementsByTagName("ul")
if (typeof persisteduls[treeid]=="undefined")
persisteduls[treeid]=(enablepersist==true && ddtreemenu.getCookie(treeid)!="")? ddtreemenu.getCookie(treeid).split(",") : ""
for (var i=0; i<ultags.length; i++)
ddtreemenu.buildSubTree(treeid, ultags[i], i)
if (enablepersist==true){ //if enable persist feature
var durationdays=(typeof persistdays=="undefined")? 1 : parseInt(persistdays)
ddtreemenu.dotask(window, function(){ddtreemenu.rememberstate(treeid, durationdays)}, "unload") //save opened UL indexes on body unload
}
}

ddtreemenu.buildSubTree=function(treeid, ulelement, index){
ulelement.parentNode.className="submenu"
if (typeof persisteduls[treeid]=="object"){ //if cookie exists (persisteduls[treeid] is an array versus "" string)
if (ddtreemenu.searcharray(persisteduls[treeid], index)){
ulelement.setAttribute("rel", "open")
ulelement.style.display="block"
ulelement.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
}
else
ulelement.setAttribute("rel", "closed")
} //end cookie persist code
else if (ulelement.getAttribute("rel")==null || ulelement.getAttribute("rel")==false) //if no cookie and UL has NO rel attribute explicted added by user
ulelement.setAttribute("rel", "closed")
else if (ulelement.getAttribute("rel")=="open") //else if no cookie and this UL has an explicit rel value of "open"
ddtreemenu.expandSubTree(treeid, ulelement) //expand this UL plus all parent ULs (so the most inner UL is revealed!)
ulelement.parentNode.onclick=function(e){
var submenu=this.getElementsByTagName("ul")[0]
if (submenu.getAttribute("rel")=="closed"){
submenu.style.display="block"
submenu.setAttribute("rel", "open")
ulelement.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
}
else if (submenu.getAttribute("rel")=="open"){
submenu.style.display="none"
submenu.setAttribute("rel", "closed")
ulelement.parentNode.style.backgroundImage="url("+ddtreemenu.closefolder+")"
}
ddtreemenu.preventpropagate(e)
}
ulelement.onclick=function(e){
ddtreemenu.preventpropagate(e)
}
}

ddtreemenu.expandSubTree=function(treeid, ulelement){ //expand a UL element and any of its parent ULs
var rootnode=document.getElementById(treeid)
var currentnode=ulelement
currentnode.style.display="block"
currentnode.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
while (currentnode!=rootnode){
if (currentnode.tagName=="UL"){ //if parent node is a UL, expand it too
currentnode.style.display="block"
currentnode.setAttribute("rel", "open") //indicate it's open
currentnode.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
}
currentnode=currentnode.parentNode
}
}

ddtreemenu.flatten=function(treeid, action){ //expand or contract all UL elements
var ultags=document.getElementById(treeid).getElementsByTagName("ul")
for (var i=0; i<ultags.length; i++){
ultags[i].style.display=(action=="expand")? "block" : "none"
var relvalue=(action=="expand")? "open" : "closed"
ultags[i].setAttribute("rel", relvalue)
ultags[i].parentNode.style.backgroundImage=(action=="expand")? "url("+ddtreemenu.openfolder+")" : "url("+ddtreemenu.closefolder+")"
}
}

ddtreemenu.rememberstate=function(treeid, durationdays){ //store index of opened ULs relative to other ULs in Tree into cookie
var ultags=document.getElementById(treeid).getElementsByTagName("ul")
var openuls=new Array()
for (var i=0; i<ultags.length; i++){
if (ultags[i].getAttribute("rel")=="open")
openuls[openuls.length]=i //save the index of the opened UL (relative to the entire list of ULs) as an array element
}
if (openuls.length==0) //if there are no opened ULs to save/persist
openuls[0]="none open" //set array value to string to simply indicate all ULs should persist with state being closed
ddtreemenu.setCookie(treeid, openuls.join(","), durationdays) //populate cookie with value treeid=1,2,3 etc (where 1,2... are the indexes of the opened ULs)
}

////A few utility functions below//////////////////////

ddtreemenu.getCookie=function(Name){ //get cookie value
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
}

ddtreemenu.setCookie=function(name, value, days){ //set cookei value
var expireDate = new Date()
//set "expstring" to either future or past date, to set or delete cookie, respectively
var expstring=expireDate.setDate(expireDate.getDate()+parseInt(days))
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
}

ddtreemenu.searcharray=function(thearray, value){ //searches an array for the entered value. If found, delete value from array
var isfound=false
for (var i=0; i<thearray.length; i++){
if (thearray[i]==value){
isfound=true
thearray.shift() //delete this element from array for efficiency sake
break
}
}
return isfound
}

ddtreemenu.preventpropagate=function(e){ //prevent action from bubbling upwards
if (typeof e!="undefined")
e.stopPropagation()
else
event.cancelBubble=true
}

ddtreemenu.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
}

 

I don't know if this is a JavaScript problem or HTML, or what, but I'm hoping someone can help me figure this out. It looks kay in Firefox. Maybe it's just an issue with Internet Explorer? Any suggestions?

[haku]

It sounds like a case of the default CSS settings for list items being different for IE and FF. Download a CSS reset sheet and attach it to your document before all other CSS sheets. This puts all browsers at roughly the same defaults, eliminating situations like this.

 

Either that or explicitly set the top and/or bottom margins on the list items which should cause them to be the same for each browser.

[twilitegxa]

Okay, thanks. I will try those suggestions. :-)