Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthoreasement
    • CommentTimeJan 9th 2006
     permalink
    I am re-doing a nav in CSS and having issues with IE. It's working in FF 1.5 on PC.

    The issue with IE is that it shows up vertically rahter than horizontally.
    http://mattbillings.com/nav/nav2.html

    Anyone know what could be going on?

    Side note:
    The code is heavily based on an artice from a list apart here:
    http://www.alistapart.com/articles/horizdropdowns
    •  
      CommentAuthordroppyale
    • CommentTimeJan 9th 2006 edited
     permalink
    ul li a {
    display: block;
    border-left:1px solid #C3C3C3;
    border-right:2px solid #777B7F;
    z-index:1000;
    background:#8B8B8B;
    color:#FFFFFF;
    font-family:arial;
    font-size:12px;
    text-align:center;
    height:21px;
    line-height:21px;
    padding: 2px 5px;
    text-decoration:none;
    float: left;
    }


    That fixed the issue.
    •  
      CommentAuthordroppyale
    • CommentTimeJan 9th 2006
     permalink
    You can also remove the float from

    ul li { }

    not necessary.
    • CommentAuthoreasement
    • CommentTimeJan 9th 2006
     permalink
    thanks.

    totally missd that.

    Why wouldn't the ul li lfat left cascade down?
    Is it because the display:block on the ul li a ?
    •  
      CommentAuthordroppyale
    • CommentTimeJan 9th 2006 edited
     permalink
    I don't think floats are inherited... Could be because of the display: block.
    •  
      CommentAuthornifkin
    • CommentTimeJan 9th 2006
     permalink
    whoa, familiar faces starting to crop up everywhere nowadays. hi easement.
    • CommentAuthoreasement
    • CommentTimeJan 9th 2006 edited
     permalink
    Alright, another question. This one should be easier and more straightforward.

    So, I realized that by putting this page in another page, it was going to bork all my other unordered lists, so I wrapped it all in a div with an id of nav . the page is located at: http://mattbillings.com/nav/nav2.html

    Now, I'm having issues declaring the styles.

    I thought it would simpy be:
    #nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 900px; /* Width of Menu Items */
    }

    #nav ul li {
    position: relative;
    float:left;
    }

    However, that doens't work out. Any idea?


    yo nifkin: good to see ya. much more signal to noise on this board. we still need to hook up a D.C. meetup.
    •  
      CommentAuthordroppyale
    • CommentTimeJan 9th 2006
     permalink
    I don't see that your css has changed, it is not targeting that specific ID.
    • CommentAuthoreasement
    • CommentTimeJan 9th 2006 edited
     permalink
    That's right. when I threw it in there it messes up. So I took it out since it didn't work.

    Just realized it help to see the bad code so you can help out. I just put it back in.


    The issue, is that I can't align the 2nd tier to the left.

    http://mattbillings.com/nav/nav2.html
    •  
      CommentAuthordroppyale
    • CommentTimeJan 9th 2006
     permalink
    #nav li ul {
    position: absolute;
    top: 25px;
    display: none;
    left: 0;
    }
    • CommentAuthoreasement
    • CommentTimeJan 9th 2006
     permalink
    Thanks.

    So what happened when I put nav in?

    Was nave a block element and then each li ul was set relative to to it's parent ul?
  1.  permalink
    By setting your parent UL (the displayed navigation without the hover) to position: relative; you then give any child elements a new point of reference, being from the UL itself instead of the body or parent container - which is usually the window.
    •  
      CommentAuthornifkin
    • CommentTimeJan 9th 2006
     permalink
    we still need to hook up a D.C. meetup.

    i was thinking the other night that DC was in serious need of some nerdherd action. have to see who all i can still find contact infoz for...
    • CommentAuthoreasement
    • CommentTimeJan 10th 2006 edited
     permalink
    Almost there. I need to put a selected state on the top tier when clicked. Basically, I need to change the blackground and font colors.

    I tried to specify a new class at the bottom called .nav selected with the changes. However, this didn't work. I tried the actual LI item and then I tried the A tag. However, nothing seems to work.

    I think it has something to do with the floats. I tried messing around there and trying some display stuff, but nothing seemes to work.


    Here's what ihave now. Click on a top tier item. (I specified a height so you can better see what's going on).


    http://mattbillings.com/nav/nav2.html#

    I also tried to put the style on the list item as well as on the anchor tag, but that didn't work out either:
    linky for the list and anchor with the red border removed.
    •  
      CommentAuthorJohnRiv
    • CommentTimeJan 10th 2006 edited
     permalink

    Your style for ".nav_selected" isn't specific enough to override the "#nav ul li a" style. Change your css to


    #nav ul li a.nav_selected { background-color:#FFF; color:#393939; }


    and you should be good.


    More info on the topic over at CSS: Specificity Wars

    • CommentAuthoreasement
    • CommentTimeJan 10th 2006
     permalink
    JohnRiv: Thanks. that worked like a champ.
    • CommentAuthoreasement
    • CommentTimeJan 10th 2006
     permalink
    I got a new issue now:

    I went to pop it into the existing site and thing went a bit weird. The alignment with the leftmost item went away. Also, in windows the nav items don't all fit on one line and the images pop down even further.

    Also, I can't seem to get the menu_bg_bar to show up. The #nav must have some conflicting code, but I can't fid it for the life of me.


    http://mattbillings.com/nav/nav5.html#
  2.  permalink
    You're floating your list items. This is what is causing your background to not appear. To fix this, set the height of the first unordered list and/or add clearing after the last element.
    • CommentAuthoreasement
    • CommentTimeJan 11th 2006
     permalink
    I gave that a go and the background is not showing up being the Nav. In addition, it's still breaking lines in IE.

    I added the folllowing after the UL and before the logout/help page


    In addition, i hardcoded the style for the main UL in the ul tag because i wasn't sure how to list in the style sheet due to teh specificity: would it be:

    #nav #nav_items{height:25px;}
    -or-
    #nav_items{height:25px;}

    neither worked for me so that's why i hard coded it in.

    http://mattbillings.com/nav/nav5.html#
    • CommentAuthoreasement
    • CommentTimeJan 11th 2006 edited
     permalink
    Alright, I got the bg bapr to pop behind the navigation, but I'm still having the following isues:

    1) the logout and help buttons aren't on the same line and i tried clearing and all that good stuff. I moved clear around a bunch of places starting with the last item in the 2nd tier nav and going all the way past the logout buttons. nothing seemd to work. I also tried to float the logout/help right, but that didn't work. moved it up top and then down below. (this is in both FF and IE).

    2) the menu items don't fit on one line in IE. They break after reports.

    3) the 2nd-tier menu items don't align to the first item like they used to.

    same page: http://mattbillings.com/nav/nav5.html#
    • CommentAuthoreasement
    • CommentTimeJan 11th 2006
     permalink
    getting closer.
    lists don't line up and IE is still popping reports down one line.

    new page: http://mattbillings.com/nav/nav6.html#
Add your comments
    Username Password
  • Format comments as (Help)