CSS Rule not applied for the a:active state in IE-8 & Opera-10

HTML & CSS
1

Hello all,

I’m a new member, and relatively new to website design as well. I’ve been wrestling with a design issue and have not found any applicable solutions during my searches. If I missed one, perhaps it was due to my choice of keywords.

Essentially, I’ve designed a horizontal navigation bar that uses image-buttons, which are contained in a sprite. To make the navigation accessible to screen-readers and search-engine bots, I utilized the Dave Shea enhancement (empty span) of the FIR technique. For cross-browser compatibility, I used the most current versions of the five most popular browsers - Chrome, Firefox, IE, Opera & Safari. I currently don’t have the resources to test the older browsers, and quite frankly, i’m scared to. :slight_smile:

Everything worked well in Chrome, Firefox & Safari, but IE and Opera proved to be troublesome. Those two browsers refused to apply the CSS rules to the a:active state, when the mouse clicked on a button; the CSS rule was to replace the existing image with another, and then reestablish the previous state when the mouse was released. How difficult can that be?

Below is a snippet of CSS markup that I hope is sufficient to reveal my issue.

#menuButtons { /* <ul id=“menuButtons”> */
height: 40px;
margin: 0;
padding: 0;
font-family: arial, verdana, sans-serif;
font-size: 0.8em;
text-decoration: none;
list-style-type: none;
}

#menuButtons a {
display: block;
height: 40px;
margin: 0;
padding: 0;
text-align: center;
text-decoration: none;
}

#menuButtons li { float: left; }

li span { /* a typical list-item — <li id=“home”><a href=“home.htm”><span></span>Home</a></li> */
position: absolute;
height: 40px;
margin: 0;
padding: 0;
overflow: hidden;
}

#home span { background: url(…/images/master-sprite_3.png) no-repeat -50px 0px; left: 14px; width: 59px; }
#home a:hover span { background: url(…/images/master-sprite_3.png) no-repeat -50px -100px; }
#home a:active span { background: url(…/images/master-sprite_3.png) no-repeat -50px -50px; }

Again, everything works very well in Chrome, FF & Safari. IE & Opera both respond to the hover state, but when I click on an image-buttom, the CSS rules aren’t applied, even though the hyperlinks works.

Thanks for your help,

Bryan

2

Hi Bryan,

Do you have a link that we can look at as it’s easier to test with real images etc?

For IE you will usually need to add a rule to the anchor first so that the rules to the span will work.
e.g.


li#home a:hover{visibility:visible}
3

Hi,

There are 2 bugs that are affecting Ie6 and opera here and both need different fixes.

IE6 fore some reason won’t show the active state even with my fix above unless you change the span element for an em element instead. This used to be an old ie5mac bug but seems as though it is still here in some shape in ie6.

Opera 10 (early opera 9 is ok) seems to put the hover state on top and the active state seems to be underneath and won’t activate the image swap. Therefeore a negative z-index is applied on hover to allow the active image to be swapped.

This has the downside of then revealing the hidden text so there is no way around it but to put the hidden text in another element and reduce that z-index even more.

This was the only solution that I could get to work whilst still satisfying all the requirements of the image replacement technique.

Here it is all rolled into a demo.

http://www.pmob.co.uk/temp/sprite3.htm

Just use that as your base.

4

Paul,

Thanks for the quick replies.
Unfortunately though, I don’t yet have an online site for you to test. I will try the solution from the link you posted.