Grow your CSS skills. Land your dream job.

2nd link in my nav is FAILING…please help

  • # June 9, 2010 at 12:07 am

    Hello Forums,

    i have a simple css sprite nav set up with simple javascript fades; all works fine without javascript…. however, when javascript is enabled my second nav button does not work correctly. I looked over my code several times but i can’t understand what i’m overlooking…perhaps someone with fresh eyes can help ??

    my nav:
    http://elneco.biz/mynav/yeah.html

    my css:
    http://elneco.biz/mynav/mystyle.css

    thank you to anyone that helps me out
    -jaime

    # June 9, 2010 at 3:25 pm

    I’ve been looking at your javascript and I can’t spot exactly what the problem is.
    You could do things differently though.
    Instead of adding a div ontop of the <li> and using all of those variables, the <a> could be the hover state and the <li> could be the default state. Have a look at this tutorial http://css-plus.com/2010/03/fading-navigation-menu/.

    I can see you are going for the "work with js disabled" approach. But I think it would probably be possible to do this (with a little but of editing) and more simple to go for the other approach.

    # June 9, 2010 at 11:58 pm

    What I like to do when one of a set of things isnt working is to delete it and replace it with a copy of one of the working ones and then tweak and check step by step till you transform it into the original you wanted.. In your case, delete the 2nd link and copy the first in it’s place. If it works, this assures you that there was in fact an issue with the code and it wasn’t just affecting the 2nd link, which ever one it may be.

    After you have a working duplicate link in place, change it piece by piece checking it each time to make sure it works. Continue till you have the link you originally wanted. If it suddenly doesn’t work, probably like how the original problem was, then you found what was causing the issue and can fix it.

    # June 10, 2010 at 5:03 pm

    Thanks guys, i actually figured it out! Nothing was wrong with the java script..it was the css:

    .nav-Hotels, .nav-Hotels-click {
    position: absolute;
    top: 72;
    left: 0px;
    width: 125px;
    height: 42px;
    background: url(pix/Nav.png) no-repeat -125px -72px;
    }

    property:

    top:72;

    should have been:

    top:72px;

    ….such a simple fix and i was going crazy for hours…bah!
    Thanks for the input though really appreciate you guys checking out my problem.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".