Having trouble getting your CSS rollovers un-glitchy? Pre-load them, easily… If HUGE can learn from me, so can you! ;) (I’m saying this jokingly.)
Yes, this a real email I sent HUGE. They fixed the problem by doing exactly as I said. And they didn’t even say THANK YOU!
I’ve sent this same sort of email to lots of people - including some pretty great designers and developers. All not preloading their rollovers. So, for the sake of helping to spread the gospel of the css preload, I’m just going to email everyone the link to this article from now on…
Some of you asked for a video (okay, one person). I love clusterflock, and they don’t have non-semantic HTML (despite putting H2s before H1s), but they’ve got the same problem with CSS rollovers: clusterflock rollover (144KB) (Did you catch the glitch?)
From: noel@eight6.com
Subject: Attention, you have a website bug…
Date: February 20, 2008 12:27:29 AM GMT-05:00
To: nameremoved@hugeinc.com
Hi HUGE!
You’ve got a problem with your website. Albeit a small one, but one a pro should not make.
Your hover state on your div element with the #logo id isn’t preloading the hovered image. Thus, you get a flicker on the hover state when the image has not been cached. On a slow connection this can be from a half second to 2 or more seconds. Bad implementation.
First things first, you are using incredibly non-semantic markup for your header. I specialize in standards compliant markup and have been doing so for 10 years.
Your code SHOULD look something like:
<h1 id="logo"><a href="/">HUGE</a></h1>
NOT LIKE THIS: <div id="logo"><a href="/"></a></div> BAD!!! BAD!!!
I know you don’t need better search results, as you get plenty of clients already. But, by being the best, you should really have the best code… you don’t.
Again, to fix the bug, that I’ve also put onto video here:
http://eight6.com/assets/huge_hover_problem.mov
To fix it, preload the hover image by implementing the following CSS, that loads the default image behind the link in a container div.
#logo {
/* This is the line that prevents the flicker when hovering */
background:url(/imgs/logoBlack.gif) no-repeat;
}
#logo a,
#logo a:link,
#logo a:visited {
background:url(/imgs/logo.gif) no-repeat;
display:block;
width:144px;
height:57px;
}
#logo a:hover,
#logo a:active {
background:url(/imgs/logoBlack.gif) no-repeat;
}
BTW, I am in NYC this week for client work if you would like to meet me and I can show you the problem. Or feel free to call me at 734-642-9187
I think you guys do amazing work. Keep it up… and if you need a hand keeping that code tight and more semantic, please let me know.
Best,
Noel Jackson
-
noel jackson
founder eight6 | http://eight6.com
noel@eight6.com
+1.734.642.9187
Sphere: Related Content
