HELP!! Menubar issues in Firefox (but not IE)

[ready2spark]

Hi all,

I'm a programming neophite. Now that I've got that out of the way, I have a problem that was brought to my attention by one of my blog readers. My blog is http://www.ready2spark.com. As you'll note, if you view the blog in IE, it looks just fine. However, if you view the blog in Firefox, the menubar has a significant cascading problem (it looks like a jumbled mess). I've tried posting on a number of forums but have not rec'd a response...I'm hoping your gurus can help. If you require my code, can you please let me know what you require and I'd be happy to send it.

Thank you in advance!
:-)

[_Aerospace_Eng_]

You can't put an unordered list directly in another unordered list. For example this is wrong
<li class="current"><a href="#" title="ready.2.spark">ready.2.spark</a></li>
<ul>
<li><a href="http://www.ready2spark.blogspot.com" title="ready.2.spark> Home">. Home</a></li>
<li><a href="http://ready2spark.blogspot.com/2005/12/subscribe.html" title="ready.2.spark> Subscribe">. Subscribe</a></li>
<li><a href="http://www.ready2spark.com/2006/12/about-lara-mcculloch-carter.html" title="ready.2.spark> Lara McCulloch-Carter">. Lara McCulloch-Carter</a></li>

<li><a href="http://www.regaltent.com" title="ready.2.spark> The Company">. The Company</a></li>
<li><a href="http://ready2spark.blogspot.com/2005/12/in-news.html" title="ready.2.spark> In The News">. In The News</a></li>
<li><a href="http://www.ready2spark.com/2005/01/contact-form.html" title="ready.2.spark> Contact">. Contact</a></li>

</ul>
<li class="current"><a href="#" title="event . magazines">event . magazines</a></li>


It should be something like this
<li class="current"><a href="#" title="ready.2.spark">ready.2.spark</a>
<ul>
<li><a href="http://www.ready2spark.blogspot.com" title="ready.2.spark> Home">. Home</a></li>
<li><a href="http://ready2spark.blogspot.com/2005/12/subscribe.html" title="ready.2.spark> Subscribe">. Subscribe</a></li>
<li><a href="http://www.ready2spark.com/2006/12/about-lara-mcculloch-carter.html" title="ready.2.spark> Lara McCulloch-Carter">. Lara McCulloch-Carter</a></li>

<li><a href="http://www.regaltent.com" title="ready.2.spark> The Company">. The Company</a></li>
<li><a href="http://ready2spark.blogspot.com/2005/12/in-news.html" title="ready.2.spark> In The News">. In The News</a></li>
<li><a href="http://www.ready2spark.com/2005/01/contact-form.html" title="ready.2.spark> Contact">. Contact</a></li>

</ul>
</li>
<li class="current"><a href="#" title="event . magazines">event . magazines</a></li>


Notice I put the </li> after the </ul> part.

[ready2spark]

You are brilliant!! I did exactly as you said and it fixed the main problem i was having - thank you, thank you, thank you!!
Now, it's create a minor little problem - http://ready2spark.com. My 'event.associations' title is now on a 2nd line. How do i move this up?

All my best!

[_Aerospace_Eng_]

You have to decrease the width of your li elements in your stylesheet. You have some errors in your stylesheet. First change this
ul#nav {
height:32px;
margin:10px auto;
width:auto;
list-style: none;
border-bottom:1.5px dashed #cccccc;
}
li {
float: left;
text-align: left;
position: relative;
width: auto;
margin-right: 42px;
}
}

to this
ul#nav {
height:32px;
margin:10px auto;
width:auto;
list-style: none;
border-bottom:1.5px dashed #cccccc;
}
ul#nav li {
float: left;
text-align: left;
position: relative;
width: auto;
margin-right: 42px;
}
ul#nav li.last {
margin-right:0;
}

Now for the li element that has "event.associations" add class="last"

[ready2spark]

OK, I swear this will be my last round of questions. You've been a life saver (or at least a blog saver). Thank you!
In my drop down menu there are 3 strange things happening:
1. there are little hollow dots beside my text which I would like to remove
2. if the dots have to remain, they are not lining up with the sub-menu items (as you'll note the main menu item has a dot beside it but the last item in the sub menu does not) - the dots appear to have shifted up.
3. In my script, I thought I specified to have the text change to pink when the cursor rolls over it. This happens in IE but doesn't in Firefox. Any reason why. I'm sure it has something to do with my stellar code writing capabilities.

Thank you again! Last questions...I promise!:thumbsup:

[_Aerospace_Eng_]

#nav li {
list-style:none;
}
That should take care of the circles.

They aren't pink because you didn't fix what I told you to earlier. You have this
ul#nav li.last {
margin-right:0;
}
}
See anything wrong?

[ready2spark]

All fixed! thank you very much:)