Grow your CSS skills. Land your dream job.

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:
    http://mustangsofburlington.com/martin/ … issue.html

    Issues:

    • 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:

      Code:
      ul#nav {
      background:url(../images/menu.png);
      position:relative;
      top:115px;
      left:443px;
      z-index:15000;
      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:
      [img]http://mustangsofburlington.com/martin/ver2/images/menu.png[/img]

      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

    Code:
    left:443px

    and replace it with

    Code:
    margin-left:443px

    .
    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

    Well, the image itself is a .png, so you’ll need the ie6pngfix for starters:
    http://www.twinhelix.com/css/iepngfix/

    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?

    Code:
    # 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.

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