Vertical UL CSS Navigation Issues in Firefox

Hi all,

I'm working on a site for a client. We're using vertical navigation in a 3-column liquid layout. My current main issue with this is that, when I enter the URLs for the navigation, Firefox (1.5.0.4) displays the link information below the bullet. If I take away the URL and just show it as an ordinary UL, there are no problems.

Any ideas what's wrong and what I can do to fix it?

You can see what I've got at http://www.davidpetrieassociates.com/dpt/.

FYI, the styling is in a separate file.

TIA,
David

Try this code. You don't actually need that extra "nav2" div that you had, it was really serving no purpose. You can just use this html and css here. Should to the trick. You can add more styles, but this is the basics of it.

HTML Code:

---

<div id = "right" class = "column">
<ul>
<li><a href = "aboutus.html">About Us</a></li>
<li><a href = "contact.html">Contact Us</a></li>
<li><a href = "blog.html">Blog</a></li>
<li><a href = "search.html">Search</a></li>
<li><a href = "help.html">Help</a></li>
</ul>
</div>

---

HTML Code:

---

#right ul {
list-style: none;
border: none;
}
#right ul li {
background: url(grnbutton.gif) no-repeat 0 50%;
padding: 0 0 0 15px;
margin: 15px 0 0 0;
}
#right ul li a {
display: block;
padding: 0px 2px 2px 3px;
}

---

Hi deronsizemore,

That has fixed it. Thank you.

Was the issue the extra div, or was it to do with padding and margins?

Thanks again!
David

By the way, your content and your navigation are in different laguages. I don't know who your intended audience is but it subtract from usability.

If you want a bilingual page than include it as an option in the top left corner, perhaps with the flags of the countries those laguages belong to and alt text with the name of the language in it's native tongue.

Collarbeam,

The body text is just place-holder gibberish. I'll be putting real English in there when the client approves the layout and gives me the text.

Thanks anyway,
David

Quote:

---

Originally Posted by petriedn

Hi deronsizemore,

That has fixed it. Thank you.

Was the issue the extra div, or was it to do with padding and margins?

Thanks again!
David

---

Honestly I didn't look at it that closely...I just took a quick look and more or less gave you some code that I had already been working with for a menu of my own. If you show me the code again I can tell you more closely. But if I remember right from the quick look I had, it was a margin/padding issue along with not having your bullet set as the background image of the <li> in the CSS.

Actually, in the current version, I changed the bullet from a background to a disc url, and everything still works fine in both IE and Firefox. Here's the code as I finally went with it:

Quote:

---

#right ul {
list-style: disc url(grnbutton.gif);
border: none;
line-height: 20px;
}

#right ul li {
font-weight: bold;
padding: 0 0 0 5px;
margin: 5px 0 0 0;
}

#right ul li a {
display: block;
width: 100%;
text-decoration: none;
padding: 0px 2px 2px 3px;
}

#right ul li a:link,active {
color:blue;
}

#right ul li a:hover {
color:red;
list-style: disc url(redbtn.gif);
}

#right ul li a:visited {
color:green;
}

---

Thanks again for your help!

David

Cool, sounds good. I had just never seen the "disc url" attribute, so I figured that might have been messing it up. Must have just been a margin padding issue.

Good Luck :-)