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?

score 0 · Accepted Answer · edited May 23 '17 at 11:59

0

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

edited May 23 '17 at 11:59

Community

1
1

answered Jan 28 '16 at 15:11

Michael Benjamin

346,931
104
581
701

with proper closing tag it still does not work in Chrome or standard mode in IE. Also display: block is not an option since when there are more than one image hyperlink, instead of having them in one row, each one takes up a row on its own. let me modify my question to reflect that – Coding Duchess Jan 28 '16 at 16:44
1

So instead of `block` use `inline-block`. – Michael Benjamin Jan 28 '16 at 16:48
Michael, I tried using inline-block as someone previously suggested, and the image appeared for a second during page reload and then disappeared again – Coding Duchess Jan 28 '16 at 16:55
Is that what's happening with the demo link from my previous comment? – Michael Benjamin Jan 28 '16 at 16:55
OK, I think inline-block was what did the trick. The issue was that there was something else on the page that caused the problem. Thanks for your help! – Coding Duchess Jan 28 '16 at 17:08
For answers on this site that you find useful, [consider an upvote](http://stackoverflow.com/help/someone-answers). There's no obligation. Just one way to promote quality content. – Michael Benjamin Dec 23 '16 at 18:48

Hyperlink background image only visible in IE in Quirks mode

1 Answers1