Question

Edit: closing anchor fixed. This issue exists when testing on the following browsers:

• Google Chrome
• Firefox 3.5
• Safari

Works with no problems on IE 8

I’v a really weird problem here. In short, take a look at the following html:

<a href="login_page.html" class="img">
    <span class="img_holder">
        <img src="images/columnists/mike_zeisberger248.jpg" onerror="this.src='default.jpg'"/>
    </span>
    <span class="btn">track him</span></a>  

Here’s the img_holder css class:

.img_holder{
    border: 1px solid #c8c8c8;
    display:block;
    background:#fff; 
    height: 100px
}

and the img class:

.img{
    _margin:0 12px 12px 0;
}

Now, the problem is that clicking the image nested inside the anchor tag doesn’t take you to its href link (thought, the href link shows in the status bar when hovering over the image, and opens perfectly fine when opening in new tab).

Any ideas?

Answer 1

Some browsers have issues with anchors that are display: inline (the default) containing elements that are display: block.

Add display: block to the ruleset with the .img selector.

Also see http://validator.w3.org/ — it makes a good first pass to find the low hanging fruit of QA issues. Your sample code seems to have some errors that it would pick up.