Sometimes links don't work on first click - html

Question

I knew this answer at one time, but I can't for the life of me remember it. I've searched all over for the answer but I just can't find it. I have a webpage with some anchors that are as shown below:
<a onclick="make_ajax_request('list')">
<div class="viewbar ">
<div class="icon list">
<img src="/icons/list.png"/>
</div>
<p>List</p>
</div>
</a>
They basically are links with picture icons and text. They work most of the time, but every now and then you have to click on them twice to trigger the function. I remember that it had something to do with not having an "href" attribute or the anchors themselves being inline-blocks. But I've tried everything to no avail. Does anyone have any idea of what I am referring to?

Answer 1

You shouldn't be wrapping block level elements such as with inline elements like <a>. Actually this is fine now, my information was outdated. That could very well be causing the trouble. Some (all?) browsers will try to fix that when it loads, and you could effectively end up with something like this:
<a onclick="make_ajax_request('list')"></a>
<div class="viewbar ">
<div class="icon list">
<a><img src="#" /></a>
</div>
<p><a>List</a></p>
</div>
<a></a>
In any case, you might be better off wrapping the img in the tag, and then using javasript to interpret a click on the div as a click on the inner link. Or in your case where it's not actually a link, just do:
<div class="viewbar" onclick="make_ajax_request('list')">
<div class="icon list">
<img src="/icons/list.png"/>
</div>
<p>List</p>
</div>
and in your css
.viewbar { cursor: pointer; }