SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict
    Join Date
    Sep 2001
    Location
    St. Louis, MO
    Posts
    212
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Image Rollover/Active Link Problem

    Hi everyone,

    I'd like someone to take a look at the top menu of this site. As you can tell when a link is active it is highlighted with a gradient image (actually two images that blend together). When you then run the cursor back over the highlighted image it changes to a dark grey box.

    When it does this it also skews the space between the active link and the one next to it. I would simply like for nothing to happen when the cursor is over it and have the gradient image present as if nothing were done to it. Of course I'd like the spacing between the links to remain uniform.

    While I'm at it, the image itself looks fine in FF but of course it's messed up on IE8.

    http://spotabusiness.com/new_spota1/

    Thanks

  2. #2
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i have checked your css and found this class:

    #tp-cssmenu li.tpmenutextandimagesfhover li a:hover {
    padding-left:10px;
    padding-right:0;
    color:#fff;
    }

    You should change it to this:

    #tp-cssmenu li.tpmenutextandimagesfhover li a:hover {
    padding:0 10px 0 10px;
    color:#fff;
    }

  3. #3
    SitePoint Addict
    Join Date
    Sep 2001
    Location
    St. Louis, MO
    Posts
    212
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi.. thanks for responding. That didn't do the trick.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,722
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, try removing the left padding from this rule "#tp-cssmenu li.active"
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Addict
    Join Date
    Sep 2001
    Location
    St. Louis, MO
    Posts
    212
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ryan, that takes care of the spacing issue on the hover. What do you suggest for eliminating the dark grey box that occurs when you hover over an active link? I'd like for the hover image to just stay static when the cursor is run over it if that makes sense.

    Thanks

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,722
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    From memory, remove the color:#666666 from a hover rule. I have to go to my college class now but I'm 99% sure (untested though) that the color is the cause.
    WHen you find the rule, just remove the code that selects the active page link .

    If noones helped you in a few hours then I'll be back and be more thorough
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Addict
    Join Date
    Sep 2001
    Location
    St. Louis, MO
    Posts
    212
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey R,

    That worked, in retrospect it was kind of obvious but I just wasn't seeing it. I don't want to monopolize your time but do you see any obvious reason why the gradient image that appears over the active link is broken and skewed on IE?

    Thanks

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,722
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    It's fine lol . I'm here to help.

    I'm guessing IE6? I notice it's a PNG so try placing a PNGfix script in your page .

    Sorry I can't test, I have dinner lol
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,722
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I love shrimp scampi . It's one of my favorites.

    I don't see any IE being screwy with the background image, however I no tice in IE6 your menu is broken because the <li> is a widthless float and then the anchor inside has haslayout and that's stretching the menu 100&#37; wide (thus 1 per line).

    You can fix this by floating the <a>
    Code:
    #tp-cssmenu li a {float:left;}
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #10
    SitePoint Addict
    Join Date
    Sep 2001
    Location
    St. Louis, MO
    Posts
    212
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    I love shrimp scampi . It's one of my favorites.
    You and me both
    Quote Originally Posted by RyanReese View Post
    you can fix this by floating the <a>
    Code:
    #tp-cssmenu li a {float:left;}
    When I do this it messes up the dropdown menu on the 'community' link. What are your thoughts on designing for IE7 and up and forgetting about 6? I don't want to make anything that looks half a$$ed even for a very small percentage of viewers but it gets so maddening to chase down every last bug.

    Speaking of that, the broken image shows up in IE8... IE7 looks fine, I no longer have a machine with 6 installed.

    Thanks

  11. #11
    SitePoint Addict
    Join Date
    Sep 2001
    Location
    St. Louis, MO
    Posts
    212
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One more thing if possible and I'll let this go. On the menu when a link is active it is highlighted by the two images. I'd like for those not to disappear when the cursor is run over them. I'd just like it to stay 'highlighted' if possible.

    I tried this...
    Code:
    #tp-cssmenu li.activesfhover:hover a {
        background:url(../images/style1/bgactivemenu.png) no-repeat top left;        color:#fff;}
    This does keep the 2px wide left edge image present on hover but I'm not getting the other part. I'm not even sure if the above is correct. The .css for this thing makes my head hurt.

    I don't want to keep tugging on your sleeve and asking you to fix everything that gives me trouble but this should be the last issue.

    Thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •