Hyperlink background image only visible in IE in Quirks mode

Question

I have a hyperlink on my page:

<div id="ContainerDIV">
    <a href="#" id="hlkTest" class="imgLink" title="Test" />
</div>

and

a.imgLink#hlkTest {
    background-image: url(Images/DOS.png);
}

a.imgLink {
            width: 67px;
            height: 80px;
            background-position: 0px;
            background-repeat: no-repeat;
            margin-right: 0.45em;
            margin-bottom:0.5em;

 }

#ContainerDIV
{
    padding-left:2.5em;
    padding-top:0.0em;
    width:90%;
}

The image is visible when page opened with IE in Quirks mode but not visible in a standard mode and/or in Chrome. I have been trying to figure out what CSS is only working in Quirks mode. Can anyone help?

Answer 1

Try re-structuring your code a bit:

HTML

<div id="ContainerDIV">
    <a href="#" id="hlkTest" class="imgLink" title="Test"></a>
</div>

Your original code had a self-closing anchor tag. But the anchor a is not a void element. It needs a proper closing tag. See here for more details: https://stackoverflow.com/a/31628634/3597276

CSS

#ContainerDIV {
    padding-left: 2.5em;
    padding-top: 0.0em;
    width: 90%;
}

#hlkTest {
    display: block;
    background-image: url("http://placehold.it/400x200");
    background-position: 0px;
    background-repeat: no-repeat;
    height: 200px;
    width: 400px;

 }

DEMO