The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Sprite Menu Issue

  • # November 13, 2008 at 7:45 pm

    Trying my hand at a sprite menu system and am having some problems.

    The test site so you can see what I am referring to: … issue.html


    • The way it is coded currently causes Firefox to have a horizontal scroll bar. When I place overflow: hidden; on the ul#nav element, the scroll bar disappears…along with the menu[/*:m]
    • IE6 is being, well, IE6. I can’t get the menu to work correctly at all. The hover states and current states do not work and the images don’t line up at all[/*:m][/list:u]

      Current CSS code for the menu:

      ul#nav {
      font-size: 10px;
      ul#nav li { float:left; list-style-type:none; z-index: 15000; }
      ul#nav li a { height:56px; display:block; position:absolute; top:0; text-indent:-9999px; outline:none; }

      li#navHome a, li#navServices a, li#navGallery a, li#navContact a { background:url(../images/menu.png); }

      li#navHome a { background-position:0 0; width:87px; left:0; }
      li#navHome a:hover { background-position:0 -56px; }
      li#navHome a.current { background-position:0 -112px; }

      li#navServices a { background-position:-87px 0; width:137px; left:87px; }
      li#navServices a:hover { background-position:-87px -56px; }
      li#navServices a.current { background-position:-87px -112px; }

      li#navGallery a { background-position:-224px 0; width:117px; left:224px; }
      li#navGallery a:hover { background-position:-224px -56px; }
      li#navGallery a.current { background-position:-224px -112px; }

      li#navContact a { background-position:-341px 0; width:116px; left:341px; }
      li#navContact a:hover { background-position:-341px -56px; }
      li#navContact a.current { background-position:-341px -112px; }

      The image itself:

      I have attached an image showing how it looks in Firefox 3.0.3, IE7, and IE6. What the attachment doesn’t show is the horizontal scroll bar in Firefox. In the example, Home is current and Gallery is in hover state.

      So, is there anything sticking out to any of you that would be causing these issues? Any help you can provide and/or light you can shed would be immensely appreciated. Thanks in advance.

    # November 13, 2008 at 8:40 pm

    get rid of


    and replace it with


    I think that should fix the horizontal scroll

    # November 14, 2008 at 8:03 am

    Thanks chazzwick. Don’t know why I didn’t think of that myself.

    So, now I just have that nasty IE6 issue to deal with. Anyone have any ideas? Thanks.

    # November 14, 2008 at 4:52 pm

    This reply has been reported for inappropriate content.

    Well, the image itself is a .png, so you’ll need the ie6pngfix for starters:

    Other than that, the hover seems to be working fine on my end.

    # November 14, 2008 at 6:21 pm

    Thanks for the reply Doc. I was using a different iepngfix, but had just tried the one you posted right before I came here to check this post. lol. I read where the png fixes don’t play well with background-position, but the one you posted is supposed to work correctly when the javascript file is included. It worked, but then I ran into the problem where the links weren’t clickable. I tried a few different things and could never get it to work correctly.

    So, I cut the image into several pngs and was just going to do a regular ol’ image swap on hover for IE6 only. But now I can’t even get the to work. This is the only thing I have left to complete for this template and it is really becoming frustrating. For the life of me, I can’t see why this won’t work. Any clues?

    # November 15, 2008 at 7:16 am

    Viele cheap Rolex replica versuchen, dieses schillernde Material ohne wirklich using das Perlmuttmaterial zu kopieren. Replik rolex Uhren, zwecks Kosten unten zu halten, häufig benutzen die echten Materialien nicht im Aufbau der Uhren.

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed