Inline img with <a> causes weird issue in IE

StackOverflow https://stackoverflow.com/questions/926180

Question

Doctype:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

HTML:

<a href="http://www.somelink.com">
    <img src="images/someimage.jpg" alt="sometag" />
</a>

CSS:

div.something img {
    display:            inline;
    border:         none;
}

Firefox shows them just fine, IE just adds a little inlined box (presumably where it expects text to be?) with a purple-ish border that IE uses for visited links. It occurs in all versions (6, 7 and 8).

Was it helpful?

Solution

Using the following HTML, I was able to reproduce your problem:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        div.something img 
        {
            display: inline;
            border: none;
        }
        div.something a
        {
            border: 0;
        }
    </style>
</head>
<body>
    <div class="something">
        <a href="http://www.somelink.com">
            <img src="images/someimage.jpg" alt="sometag" />
        </a>
        <a href="http://www.somelink.com">
            <img src="images/someimage.jpg" alt="sometag" />
        </a>
        <a href="http://www.somelink.com">
            <img src="images/someimage.jpg" alt="sometag" />
        </a>
    </div>
</body>
</html>

The problem with this is that the whitespace between the end of the opening "a" tag and the start of the "img" tag is considered to be part of the link.

Replacing those with:

<a href="http://www.somelink.com"><img src="images/someimage.jpg" alt="sometag" /></a>

solved the problem in IE8 for me.

EDIT: Removed the CSS. Turned out not to be necessary.

OTHER TIPS

You need to set border="0" on your image tag, that will resolve the issue. IE when an image is inside a link, automatically puts the "link" border around it, to show it is a link.

You might also be able to use CSS to set the border to 0 for the img tag

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top