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

Home Forums CSS Sprite Menu Issue

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

    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.


    get rid of


    and replace it with


    I think that should fix the horizontal scroll


    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.


    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?


    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 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.