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 ??
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.
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.
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
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.
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.
.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.