SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Long Beach
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Navbar (using li) issues in non-IE browsers

    http://www.sblum.net

    HTML Code:
    <div id="navlist">
    <ul>
    <li><a href="?pg=blog/main.php" target="_self">main</a></li>
    <li><a href="?pg=aboutme.htm" target="_self">about me</a></li>
    <li><a href="?pg=poetry.htm" target="_self">poetry</a></li>
    <li><a href="?pg=music.htm" target="_self">music</a></li>
    <li><a href="?pg=contactme.htm" target="_self">contact me</a></li>
    <li><a href="?pg=archives.htm" target="_self">archives</a></li>
    </ul>
    </div>
    HTML Code:
    #navlist {
    text-align: center;
    width:106px;
    }
    
    #navlist ul {
    padding: 0px;
    margin: 0px;
    whitespace: nowrap;
    }
    
    #navlist li {
    display: inline;
    list-style-type: none;
    padding: 2px;
    }
    
    #navlist a {
    border: 1px solid black;
    background-color: rgb(127,192,213);
    cursor: pointer;
    width: 106px;
    padding: 2px;
    }
    
    #navlist A:link {
    TEXT-DECORATION: none;
    }
    
    #navlist A:visited {
    TEXT-DECORATION: none;
    }
    
    #navlist a:hover {
    background-color: rgb(77,142,163);
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
    }
    Is there a way to achieve the rollovers in another way using CSS? I can easily make this work without rollovers just using divs, but the only I way I could get the rollovers to work was using the list...

    Also, in other browsers, the style sheet switcher is acting funky. When you click a switch link parts of the page don't change until to scroll down and back up or resize the page.

    Thanks in advance, folks!

  2. #2
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey that was pretty cool! I actually see lots of benefits to using a unordered list without the bullet items especially when it comes to making a webpage more accessible for someone with disabilities.

    Your menu list was having problems displaying correctly in Mozilla 1.5 Opera 7.23 seemed fine except for your style selector which was pushed up on top of your counter.

    See attached GIF
    Attached Images Attached Images
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Long Beach
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It does the mozilla thing when I add a doctype transitional, do you know of any other way to do what I'm trying?

  4. #4
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First put in your doc type (e.g. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">) and character set (e.g. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">)

    Then validate your code using http://validator.w3.org/ and clean up any existing HTML errors. This will give us a clean slate to work from Mozilla/Netscape can do really screwy things if there are any HTML errors. Next as an experiment see what happens in Mozilla when you remove "list-style-type: none;" If the list displays in proper order, then we'll know Mozilla doesn't like it when that style is used.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Long Beach
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've done that, KLB. I don't have any code transitional errors in XHTML1.0 Transitional. There are just VISUAL errors introduced when I add the doctype.

  6. #6
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If there are display errors with the doctype included, then we have a bigger problem that needs to be tracked down.

    Kill "display: inline;" under "navlist li" and see what happens, this just doesn't smell right. Let me know what happens.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Long Beach
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    w/o doctype it just spaces them out a little bit, but with the doctype it puts them in order (vertically), but the width is not expanding to the full 106px, it's just the width of the word.

  8. #8
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Long Beach
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, by the way, you can see it with doctype at http://www.sblum.net/index2.php

  9. #9
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Long Beach
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I could do it by defining individual right/left borders on the a:hover for each navbar item, but that's really messy and cheaty.

  10. #10
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay try this with the page that has the doctype

    #navlist li {
    list-style-type: none;
    width:106px;
    margin-top:0px;
    marign-bottom:0px;
    padding: 2px;
    }

    #navlist li:hover {
    background-color: rgb(77,142,163);
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
    }
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  11. #11
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Long Beach
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Doesn't work, the only thing you can :hover is an anchor, I believe.

  12. #12
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sblum
    Doesn't work, the only thing you can :hover is an anchor, I believe.


    How about the non-hover fixes I suggested.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  13. #13
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Long Beach
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Those just changed the size of the box and the spacing of them. I've most of it figured out, I just can't make the hover span to the left and right sides of hte boxes, even tried adding extra divs in there.

  14. #14
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Long Beach
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    KLB: Thanks, man, I appreciate the time you've put into helping me with this. I really appreciate it. Can you offer any more advice as to my second problem, half of the page not switching colors when you click a stylesheet link?

  15. #15
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You might try simply replacing the hover instructions with onmouseover and onmouseout to change the background color.

    I did not expierence the problem with having to scroll the page to get colors to change. I tried Opera 7.23, Mozilla 1.5 and Netscape 6.2, none exhibited the problem color switching problem you mentioned.

    I did notice some layout inconsistencies between your standard style and the other styles. You might need to sync all of the styles.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  16. #16
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Long Beach
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The layout inconsistencies, right now, are because I'm working on getting it working with the doctype. These will be gone when I figure the **** out. It's only in IE that the color changing problems occurs, AFAIK...

  17. #17
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Orlando
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE 6 worked fine for changing the style colors (except for standard and the formatting is messed up). Mozilla doesn't like the layout so much but you knew that.

  18. #18
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool it looks like you're on your way to getting it fixed. I also got some cool design ideas with the way you used lists.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  19. #19
    Super Ninja Monkey Travis's Avatar
    Join Date
    Dec 2001
    Location
    Sioux City, Iowa
    Posts
    691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
     #navlist {
     text-align: center;
     width: 106px;
     }
     
     #navlist ul {
     padding: 0px;
     margin: 0px;
     whitespace: nowrap;
     width:106px;
     }
     
     #navlist li {
     list-style-type: none;
     }
     
     #navlist div {
     width: 106px;
     border: 1px solid black;
     background-color: rgb(127,192,213);
     cursor: pointer;
     }
     
     #navlist div a {
     width: 102px;
     display: block;
     background-color: rgb(127,192,213);
     padding: 2px;
     }
     
     #navlist div a:link {
     text-decoration: none;
     }
     
     #navlist div a:visited {
     text-decoration: none;
     }
     
     #navlist div a:hover {
     background-color: rgb(77,142,163);
     font-weight: bold;
     text-decoration: none;
     }
    This seems to fix it.
    Travis Watkins - Hyperactive Coder
    My Blog: Realist Anew
    Projects: Alacarte - Gnome Menu Editor

  20. #20
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Long Beach
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much, Travis!! display: block, so simple...

    Now, to deal with my other problem. I think this is the only browser compatability problem I've had that works on everything except IE!


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
  •