jcksn

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