Browser tricking to have two images on hover over....possible?

HTML & CSS
1

I am currently working on a website for a client of mine (http://www.donerhorsley.ca/) and I have a small menu fix I need help with.

The background image for the menu has curves on both sides, so I actually need it to appear twice (multiple backgrounds can’t get here fast enough).

I’ve got it to work somewhat, but when you go to the far right side of the menu item, the left curve disappears and I loose the link text color.

Does anybody know how I can stop this from happening?


2

I’ve used it in a couple so far and it’s been relatively pain free. :slight_smile:

3

Ah well spotted I didn’t notice that - I thought it had been fixed:)

It can easily be fixed by addressing the anchor on li:hover and not a:hover.

e.g.


#header ul li:hover, #header ul li.current_page_item {
    background: #fff url('images/menu_button.jpg') right top no-repeat;
    color: #fff;
}[B]
#header ul li:hover a[/B], #header ul li.current_page_item a {
    background: #fff url('images/menu_button.jpg') left top no-repeat;
    color: #fff;
}

That ensures that both ends light up at once :slight_smile:

As mentioned above if Ie6 support is required then an element would need to be nested inside the anchor and then change the styles from li:hover to affect a:hover and a:hover span instead.

4

Multiple backgrounds are ALREADY available is CSS3 ( just separate each url() with commas) however this create all sort of older browser compatibility issues. Still you might want to google some tutorials on CSS3 backgrounds.

having a quick look at your code ( and teh fact that your site works fine on FF and Safari on mac) I figured your problem comes from the fact that you used an li:hover and IE<8 doesn’t recognize hover on anything but <a> tags. Yup IE sucks. To add support for IE you need to restructure your code. Yup IE sucks.

change this :
#header ul li:hover, #header ul li.current_page_item
to this:
#header ul li a span,#header ul li a{display:block;}/* you’ll have to a’djust the padding here*/
#header ul li a:hover span, #header ul li.current_page_item {…}

and wrap a span around your anchor, like this:
<li id=“menu-item-75” class=“menu-item menu-item-type-post_type menu-item-75”><a href=“http://www.donerhorsley.ca/about/”><SPAN>About Us</SPAN></a></li>

hope this helps
<li id=“menu-item-75” class=“menu-item menu-item-type-post_type menu-item-75”><a href=“http://www.donerhorsley.ca/about/”>About Us</a></li>

5

Code snippets would be helpful… The menu on the live site looks fine to me, unless you are replacing that with this new snippet you need help with. It’s kind of hard to see what you need help with at this point.

6

lol - I miss a lot of things but luckily people don’t notice :slight_smile: (Your posts have usually been spot on anyway;))

Yes that’s css3pie is quite useful although I haven’t used it in real projects. I think that maybe when IE9 up and running and has a decent share I might think about using it for the older IE versions.

7

You could probably go close to recreating those rollovers completely in CSS3 and with http://css3pie.com/ have it work in IE too.

8

I think it’s to do with the right margin on the <a>. Essentially, once you move your mouse into the zone where you are outside the <a> but inside the <li>, you will be picking up the li:hover (which gives the right hand side effect) but not the a:hover (which would give the left hand side effect).

You should be able to solve this by getting rid of the margin-right on the <a>, and using padding-right if you need to. That way, the <a> will take up exactly the same space as the <li>, and so you will always get both :hover effects at exactly the same time.

9

Wow, I spotted something that Paul “CSS God” O’B missed … I’m off to celebrate :cool:

10

Wow, I spotted something that Paul “CSS God” O’B missed … I’m off to celebrate

THIS MEANS BEER.

Paul’s paying right? : )

11

and IE<8 doesn’t recognize hover on anything but <a> tags

Close.

IE7 recognises :hover on non-links but it can be uppitty with :hover in some circumstances.

12

Yes hover works in IE7 on elements other than anchors but does occasionally suffer from a similar bug to IE6 with almost the same fix being needed. They both need a rule that address the hovered element first.

e.g.


/* ie6 bug */
a:hover{visibility:visible}
a:hover span{......do something here}



/* ie7 bug */
li:hover{visibility:visible}
li:hover div{......do something here}