Image Rollover/Active Link Problem

HTML & CSS
1

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.

Thanks

2

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

Hi… thanks for responding. That didn’t do the trick.

4

Hi, try removing the left padding from this rule “#tp-cssmenu li.active”

5

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

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

7

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

8

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

9

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% wide (thus 1 per line).

You can fix this by floating the <a>


#tp-cssmenu li a {float:left;}
10

You and me both :wink:

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

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…

#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