The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Overlapping Sprite Nav

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #28102

    hey guys,

    im developing a site at the following staging URL:

    The nav on the left side is a css sprite, the image can be seen here: … Sprite.gif

    The problem is that when the active state is triggered the borders of the active dont extend far enough… i did the far right 2 columns in the sprite as i think i could maybe get around it this way but im sort of in a rut.

    I know that i could do this by absolutely positioning each nav item but i would rather not… i find that inefficient. If anyone has any suggestions that would be greatly appreciated.

    Also i would like to prevent the rollover effect from happening on a nav item that is in the active state.


    .nav_02_active {
    background: url(“../images/navSprite.gif”) -376px -36px no-repeat;
    margin-top: -4px;

    also you need to change vertical sprite offset of other navs.


    i cant get that solution to work… it just messes up all the other offsets. and since there is no actual "page change" i cant get it to work as a viable solution for all 6 nav items.



    i re-did the nav using absolute positioning so now i am getting the effect i want but still running into that 2nd problem.

    When you click on a nav item it makes it active by adding a class but than when you hover over the active it shows the hover state…

    i dont want this to happen, if i nav item is active and you roll over it there should be NO hover effect…

    The nav on this website actually has the funtionality im talking about here and it looks liek it is done using the !important style override but i cant get it working with my nav…



    thank you virtual!! worked liek a charm. very creative solution!

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.