DIV with an onclick function and an image inside of it has a dead spot

I have a DIV with in image inside of it. There is a spot right before the image that does not fire the onclick function when clicked. The rest, including the image and the DIV fire the function when clicked. I have tried attaching the function to the image itself in addition to the DIV and this does not fix the problem. Anyone know what to do?

//this give all the divs the function
var ButtonNumber = document.querySelectorAll(".ButtonStyle");
for (var i = 0; i < ButtonNumber.length; i++) {
    ButtonNumber[i].onmouseover = ChangeCursor;
    ButtonNumber[i].onclick = ButtonsAddTogether;
    B开发者_运维知识库uttonNumber[i].onselectstart = function() {return false;}
    }

This is the HTML

 <div id="55" class="ButtonStyle"><img alt="1" class="Center" src="Buttons/7.png"></div>

Try setting the image and the div to have the same height. That or use an inline element rather than a block element such as an anchor tag

I have placed your code within jsfiddle: http://jsfiddle.net/BUwFP/1/

Please look at it and tell me if it works for you. I have just:

• defined functions that were not defined (probably you just skipped them showing your code),
• added borders to image and the div that contains it,

and everything looks fine - clicking the box etc. fires events. Do similar thing and check whether your box really is placed where you click or somehow it has been moved (probably by CSS styles or JS code). You probably already know, that you may use Firebug in Firefox, Developer Tools in Chrome or anything similar.