[SOLVED] Spacing issues on lists in Internet Explorer

[twilitegxa]

I have tried many suggestions for eliminating the space between the list items in my unordered list, but none of them are working properly. Not only do I have an unordered list, but also a newgroup class that creates a wanted space between the sections. When I have tried to change the li to display: inline, the space was eliminated, but so was the wanted space between the class sections, which is what I don't want! Does anyone know a solution to this problem that will work in Internet Explorer without messing up my display in Firefox? Here is my CSS code again:

 

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

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

list-style-type: none;
padding-left: 0px;
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: 170px; float: left; background-color: rgb(212, 142, 0); margin-right: 10px; padding: 10px 10px 10px 2px; border: 2px solid black; color: white; font-size: 8pt; 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: 8pt}
li.newgroup {margin-top: 15px}
#treemenu1 a:link {text-decoration: none}
#treemenu1 a:visited {text-decoration: none}
#treemenu1 a:hover {color: black; text-decoration: none}
#treemenu1 a:active {text-decoration: none}
#main {width: 70%; float: left; 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 is my links list:

 

<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">Chapter 1: Introduction</a>
  <ul>
<li><a href="genre1.html" title="The Magical Girl Genre">The Magical Girl Genre</a></li>
<li><a href="sailormoon1.html" title="Bishojo Senshi Sailormoon"><em>Bishojo Senshi Sailormoon</em></a>
<li><a title="Sailor Moon Series Background">SM Series Background</a>
  <ul>
<li><a href="summary1.html" title="Season One Summary (Episodes #1 - #40)">Season One Summary</a></li>
<li><a href="summary2.html" title="Season Two Summary (Episodes #41 - #53)">Season Two Summary</a></li></ul></li>
<li><a href="role1.html" title="What Is Role-Playing?">What Is Role-Playing?</a></li>
<li><a href="example1.html" title="An Example Of Play">An Example Of Play</a></li>
<li><a href="size1.html" title="Character Size Relationship">Character Size Relationship</a></li>
</ul></li>
<li><a href="creation.html" class="select" title="Character Creation">Chapter 2: Character Creation</a>
<ul>
<li><a href="flowchart.html" title="Character Creation Flowchart">Character Creation Flowchart</a></li>
<li><a href="gmdiscussion.html" title="GM Discussion">Step 1: GM Discussion</a></li>
<li><a href="outline.html" title="Character Outline">Step 2: Character Outline</a></li>
<li><a href="stats1.html" title="Assign Stats">Step 3: Assign Stats</a></li>
<li><a href="attributes1.html" title="Character Attributes">Step 4: Character Attributes</a>
<ul>
<li><a href="attributes2.html" title="Scout/Knight Sub-Attributes">Scout/Knight Sub-Attributes</a></li>
<li><a href="attributes3.html" title="Negaverse/Dark Sub-Attributes">Negaverse/Dark Sub-Attributes</a></li>
<li><a href="attributes4.html" title="Neutral Attributes">Neutral Attributes</a></li>
</ul>
</li>
<li><a title="Character Defects">Step 5: Character Defects</a></li>
<li><a title="Derived Values">Step 6: Derived Values</a>
<ul>
<li><a title="Combat Value">Combat Value</a></li>
<li><a title="Health Points">Health Points</a></li>
<li><a title="Energy Points">Energy Points</a></li>
</ul>
</li>
<li><a title="Background Points">Step 7: Background Points</a></li>
</ul>
</li>

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

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

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

</ul>

 

Also, there are two lines that don't seem to have space between the links in Internet Explorer: Getting Started, Chapter 1, and The Magical Girl Genre. Any help will be appreciated! So far, a lot of suggestions don't seem to be working for me!

[twilitegxa]

All I had to do was eliminate the spacing between my links in the code:

 

This:

 

<li>Link 1</li><li>Link 2</li>

 

Instead of:

 

<li>Link 1</li>

<li>Link 2</li>

 

Here's where I found out the answer to my problem:

 

http://cssbeauty.com/skillshare/discussion/2042/ie-li-spacing-issue/