I have simplified my page and here what I have:
&l
The problem with your approach: everything is contained in this link element. So theoretically, a browser is right to assume that anything that gets clicked inside this A-tag is clicking the link. Even thought this may work differently for some browsers, and lead to the behaviour you would like, I would doubt that the behaviour is consistent over all user agents. Hence I don't see how there is any way to make this work reliably without getting rid of the A-element, respectively moving the A-element so its only around the image (which is the behaviour you desire):