CSS Rollover Buttons
I have updated the css rollover Buttons designed by Paul O’Brien, Gavin Benda and myself.
I believe the Trifecta buttons are the smartest rollover buttons out there. They allow an image swap for good looks and maintain text in the anchor for search engines. The Trifecta buttons also eliminate the annoying flicker in IE that many other css buttons have.
Thanks to Paul O’Brien for his help - he may be the smartest CSS guy on the planet. Yeah, that’s right Zeldman, I said it.
* be sure to digg it!
April 24th, 2006 at 4:40 pm
Funny, but I just happened to be searching for a solution to my problem and found this today just after you updated, even though it has been in the works for 2.5 years.
Anyway, I have a few problems with it. One is that I can’t put an image tag into my html. I need to completely change the look of the button with the CSS.
Another limitation I am trying to make work is not to use anchors. We have had a lot of problems with double submits, canceled submits, etc. It seems most of it is due to the fact the anchors are made to navigate as links. When used to kick off javascript, the results aren’t as consistent. I have been trying to make an anchorless button, which has forced me to use javascript of course.
Anyway, I have got it about perfected, except for the hourglass flicker. I am not even changing the background image, just the fact that I have a background image overlapping a style that is changing causes the problems. If you’d be interested in looking at the problem with me I be glad to share what I have done so far.
April 25th, 2006 at 7:34 am
>> “Anyway, I have a few problems with it. One is that I can’t put an image tag into my html.”
ok? Perhaps then you shouldn’t use the Trifecta buttons.
>> “Another limitation I am trying to make work is not to use anchors. We have had a lot of problems with double submits, canceled submits, etc. ”
I have no idea why this is? You should be able to create a link button that onClick calls JS with no problems.
If you want to give us a URL we can have a look…
April 25th, 2006 at 10:01 am
Hey, I’m not complaining, sorry if I sounded like I was. If I don’t use the trifecta button then where do I go? It’s best I have seen so far after two separate googling sessions looking for answers.
My issue with anchors is odd, I know. We have some very large forms that actually take some time to build and post from the client. After javascript has been used to post the form, any click on any link while waiting for that request terminates the first one. Even if the second link only runs javascript itself and isn’t used for navigating, it still interrupts. I could try some onclick=this.disable() kind of stuff, but I would need to do it for every link on the page. I guess I need to look into exactly what is causing my problems there.
Either way, the bigger problem seems to be the hourglass flicker whenever there is any background image used. If you’d like to see, here is an example:
http://www.nfdavenport.com/examples/button.html
Thanks.
April 25th, 2006 at 5:00 pm
Hi Nathan,
If you are talking about a very brief (sometimes almost invisible) flicker when you rollover an anchor that has a background image then this is an IE behaviour that can’t be avoided. It seems that IE needs to refesh the image from cache which is why you get the hourglass pop up for a fraction if a second. On my machine its virtually unnoticable but I do know its there.
Of course some rollovers are badly made and you should never swap an image on hover but rather reveal an image that is already there by hiding the image that is on top of it. (or use the background position method to swap the image in and out)
If your machine is flickering quite badly then you may have set the browers settings to “every visit” rather than the default of automatic which 99% of users have installed as default.
The only way to avoid the hourglass is to use a foreground image and hide the foreground image on hover and let it reveal an image underneath. But I realise as you have already explained you can’t use this method because you want to control it all from the css.
There is more information available here that you may not have seen.
http://www.fivesevensix.com/studies/ie6flicker/
Hope it helps anyway
April 25th, 2006 at 9:47 pm
Paul,
Actually, that is good news. Looking at my sample page from home tonight, I didn’t have the problem at all. I had actually seen comments in some of you guys’ threads about some of these problems being ‘developer only’ issues, because we tend to change our cache settings. I just hadn’t realized I was getting caught by it myself in this case.
So, anyway, since our client base is actually encouraged to use the default settings this will work for me. For the few who don’t and decide to complain, at least I have an acceptable solution for them.
My boss tried for days to work around this issue on a personal project he was working on. He was using the single sliding image method. He’s going to feel as dumb as I do when I tell him.
Thanks!
April 26th, 2006 at 4:25 am
Hello,
Thanks a lot for the update, it’s really great. I noticed that before the update on horizontal links the link tended to extend below the actual image (I posted this as a comment before I think), now the problem is gone! In the interest of learning (I am a newbie at CSS) I was wondering if you could point out where the problem was exactly and how you solved it?
Thanks!
April 26th, 2006 at 7:20 am
Jiun, it was you that got me to relook at the css buttons. I noticed there was a problem in Opera and now it’s fixed. If you view the source on the horizontal buttons you will see this code:
overflow:hidden;/* for ie to hide extra height*/
that fixed the problem…
Thanks Jiun for stopping bye and saying something!
cheers,
mark
April 26th, 2006 at 1:40 pm
Sorry to keep going slightly OT.
@paul
Strangely enough, I am still getting the hourglass flicker with my settings on automatic, but only me. No one else in my office who is set to automatic has the problem. I cleared my cache, close IE down, everything I could think of. I even tried some of the .htaccess tricks in that article.
Any idea why this might still happen on Automatic? When I set it to everytime I get the bad flickering, but on Automatic I only get the hourglass.
Thanks.
April 26th, 2006 at 1:51 pm
The hour glass will always be there in IE, if you don’t use the reveal image method - which you aren’t. Depending on your connection speed it will be more pronounced or not.
April 26th, 2006 at 2:17 pm
Hi nathan,
Well nothing surprises me with IE as it always seems to have one more bug to catch you out.
Usually clearing the cache means clearing the history and deleting the temporary internet files also, so make sure you have done both. A corrupted image in the cache or a full cache will cause the same problems as the “every visit” option. Also make sure you have a reasonable amount of space set aside for the temp internet files and the slider isn’t set at zero.
Other than that I can’t think what else could be causing it apart from a corrupt Internet Explorer of course but there’s not much you can do about that and isn’t worth the risk of re-installing. If everything else seems ok then I wouldnt upset anything else.
If you have a very slow (or old) machine the the hourglass will be visible more easily but in faster machines its a very quick flicker (unless the images are very large) and as I said before its hardly visible on my machine. It’s a shame that here is no simple way to turn it off completely.
Sorry I can’t think of anything more constructive.
April 26th, 2006 at 10:49 pm
Thanks again. Yeah, I tried all that with the cache, short of rebooting. I guess I should. My machine at works has 1.5Gb of ram and is a dual 3.2 Xeon. My coworkers don’t even see the hourglass at all, so something must be up with my setup. No worries.
Regardless, I am quite happy to have found the info at search-this and SitePoint. The forums at SitePoint are a goldmine.
September 12th, 2006 at 2:46 pm
Does anyone know if this bug as been fixed in IE 7?
September 12th, 2006 at 3:41 pm
David, there’s no bugs with the CSS rollovers in IE now.
March 8th, 2007 at 3:16 am
Would like to use Trifecta buttons but haven’t mastered Fireworks yet to create the graphics. Any idea where I could grab some buttons to start with?