Results 1 to 8 of 8

Thread: Vertical UL CSS Navigation Issues in Firefox

  1. #1
    Junior Registered
    Join Date
    Sep 2006
    Location
    Ontario, Canada
    Posts
    4

    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

  2. #2
    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;
    }
    Last edited by deronsizemore; 09-28-2006 at 04:36 PM.

  3. #3
    Junior Registered
    Join Date
    Sep 2006
    Location
    Ontario, Canada
    Posts
    4

    Thanks!!

    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

  4. #4
    Collarbeam
    Join Date
    Sep 2006
    Location
    Toronto
    Posts
    3
    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.

  5. #5
    Junior Registered
    Join Date
    Sep 2006
    Location
    Ontario, Canada
    Posts
    4
    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

  6. #6
    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.

  7. #7
    Junior Registered
    Join Date
    Sep 2006
    Location
    Ontario, Canada
    Posts
    4
    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:


    #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

  8. #8
    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 :-)

Similar Threads

  1. having a real dilemma deciding on navigation structure, need your help
    By deronsizemore in forum General Management Issues
    Replies: 0
    Last Post: 09-19-2006, 06:57 PM
  2. <br /> - Firefox Vs. IE
    By cameron in forum HTML, CSS, Layout, and Design
    Replies: 2
    Last Post: 04-18-2006, 07:39 PM
  3. Firefox has been acting up...
    By deronsizemore in forum General Chat
    Replies: 7
    Last Post: 01-12-2006, 07:25 PM
  4. Left side navigation, need extra row above that?
    By sitepointRefugee in forum Search Engine Optimization
    Replies: 3
    Last Post: 03-26-2004, 07:32 AM
  5. Legal issues with site
    By MattM in forum Business and Legal Issues
    Replies: 2
    Last Post: 03-21-2004, 07:25 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •