Please see demo of the top 1px of button not firing the link / action

Please see this example:

If you click ‘Live Demo’ at the top of the page and then click on one of the large buttons, such as ‘CHECK OUT THE CALENDAR SECTION’, then most of the time it works. But if you select the very top 1px of the button (the pointer does change to the hand) then it won’t fire. You can literally keep clicking the top 1px and nothing ever happens.

It may not seem much of a problem, but I am using this theme on a site and it’s surprising how often when testing that I click the very top of the button resulting in no action, only realising a couple of seconds later when the page hasn’t loaded. It’s very annoying.

How would I change this, I’m guessing it’s CSS?

Tested on Safari and Chrome.

Thanks for any help.

I tested it in Chrome v17, and I went over each button and the top1px still stayed a link.

Tested in FF as well just to see if any difference. What version Chrome are you using? A beta?

Hi,

The browser isn’t the issue. I have since tested on Opera, FF and IE9 and it all has the same problem. Maybe I didn’t explain myself.

Make sure you try it on the ‘CHECK OUT THE CALENDAR SECTION’ button.

By clicking the top one pixel of the ‘CHECK OUT THE CALENDAR SECTION’ button does not fire the link. If you find the top 1px, you can see the cursor change to the hand and you can sit there all day clicking but the link does not fire.

Thanks.

No you explained just fine :). I was doing exactly as you describe,e however the entire button is clickable and fires.

I don’t know why my computer is always unable to replicate issues on my end. Seems I have a magic computer. I won’t be able to help you with this, looks like someone else will :(.

Are you sure you’re being precise enough when moving the mouse? If you slowly move the mouse off the button, and then back on again so it is definitely only the top 1px covered, then you shouldn’t have a problem.

Even if you can’t, do you see anything obvious in the CSS that would suggest this happening (my guess would be a 1px border on the button, but I can;t see anything like that).

Thanks.

I’m positive I’ve been extremely precise.

I’d recommend setting all margins/paddings/borders on the buttons to 0 and seeing if tht fixes it. If it does, then go from there. Add in one at a time until you see what triggers it.

It’s all a matter of just reducing the test case and working your way back up :). It’s a crucial component of debugging.