css rollover conflict

September 3, 2009 9:55 AM

I'm having a problem with conflicting css rollovers.

I read Dave Shea's tutorial on css image rollovers, and want to use these techniques on my site, but I am having a problem.

I want to use two css rollovers on one page.

One css rollover is a logo, and the code is based exactly on this example (since my shapes are not overlapping, I don't have the problem that example shows).

The second css rollover is a menu, just like the one in this example.

I have made both of these as standalone examples, and the css rollovers work perfectly with my logo, and my menu buttons.

The problem is that when I try to position the two rollovers on the same page, with the menu buttons rollovers almost directly below the logo rollovers, it goes all wonky, and the logo rollovers bring up parts of the button rollover images in odd locations, and not all of the logo rollovers work.

(the menu buttons rollover, which are below the logo, work fine).

I have a general idea of why this is occurring, but have no idea how to separate the two css rollovers so that the logo rollovers do not "see" the button rollovers.

The code really is exactly like the examples I have linked to, and again, as standalone items, they work fine for me.

Can someone advise how best to code the positioning of these two on the same page so no conflicts occur?

I tried putting the two rollover sections in their own divs, and I tried z-axis stuff, neither of these solved the problem, at least as I implemented them.

posted by bonsai forest to computers & internet (10 comments total)

I can't help with your specific problem but I notice that the ALA article was written in early 2004 and it might be an idea to read up on more modern techniques - try searching for css sprites in delicious.
posted by ceri richard at 10:26 AM on September 3

It's really hard to answer this without seeing the actual implementation, but the behavior you're describing does seem odd.

Is the behavior consistent across browsers/versions?
Are you using a combined sprite image for both menus?
Have you checked the boundaries of the anchors to make sure they're not overlapping with the other menu?
Have you checked for accidentally repeated IDs, reused class names that might be triggering unintended styles, or selectors in the CSS that have conflicting values or values that are being overridden based on inheritance or insufficient specificity?
posted by camcgee at 11:49 AM on September 3

I'm having a hard time visualizing this, but what happens if you put a bunch of vertical space between the two rollovers - do you have the same issues? If you do, then it's likely that there's a name conflict - maybe the menu and logo have the same class name that the css refers to or something to that effect?

If this fixes the problem, then check that the logo isn't overlapping the menu or vice-versa. Negative margins or padding might be at play - it might be easier if we could see the code and css involved.
posted by backwards guitar at 12:07 PM on September 3

1. consistent in safari and firefox
2. I am using two different sprite images, one for each menu
3. Yes, I think this is where the problem is, but I don't understand how to fix it. When each logo was it's own thing (like the examples I linked to) my anchor values were all fine, and everything works. But when I place the two logos on the page together (the logo directly above the button menu), I think the logo anchor values are somehow overlapping with button menu sprites.

So what happens is that the page, without rolling over any parts of it, looks exactly how I want it to look.

But when I try rollovers on the logo, they are no longer accurately placed, and they pull the button sprites up, as opposed to the logo sprites.

The button menu seems to work fine.

4. I have checked for repeated IDs, reused class names etc, and I believe all that is fine

In answer to backwards guitar, large vertical space doesn't seem to fix the issue.

The code I am using is exactly like the code if you do "view source" in the two example images I linked to, my implementation is just trying to put the "button menu" example directly below the "odd shapes" example, using two different image sprite images, one for each menu.
posted by bonsai forest at 12:19 PM on September 3

You've set the width and height so it matches your specific images, I figure. Does it work if you remove "position: relative" ?
posted by backwards guitar at 12:25 PM on September 3

Another thing to possibly try - get rid of the border: solid 1px #000 on the menu hover - or add two pixels to the height/width of your container
posted by backwards guitar at 12:40 PM on September 3

Ok, I just put up the page so you all can see exactly what is happening. Sorry I could not do this earlier. Here it is: css rollover conflict example page

If the big logo rollovers were working, you would see link titles like "art" "projects" appear in white at certain places (the green blank areas) on the big logo. Instead, you see the lower button sprites appear in odd places.

The lower buttons work as intended.
posted by bonsai forest at 2:20 PM on September 3

You are using the same id names for both things (menu and logo). You should give them different names. You should never use the same id for two elements, anyway.

Just rename the li's in your menu with a m prefix, for example (m-art, m-projects, etc) and do the same for their styles in the CSS.
posted by clearlydemon at 2:26 PM on September 3

Forgot to link this: The difference between class and id.
posted by clearlydemon at 2:32 PM on September 3

Thank you all. Very new at this, and did not understand fully what was being asked by camcgee and backwards guitar. Very much appreciate the help!!!!!!!!!!!
posted by bonsai forest at 2:37 PM on September 3