ansaurus

Question

Inline img with <a> causes weird issue in IE

Answer 1

+1 A:

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

Mitchel Sellers 2009-05-29 14:14:37

Setting border="0" doesn't fix it. I am already setting border to none in CSS. If you actually meant 0 or 0px, both of those doesn't work either.

2009-05-29 14:16:42

@Daniel - Can you post the full HTML then? That is what is needed, I tested with a quick sample that I created and there was no issue.

Mitchel Sellers 2009-05-29 14:23:24

@Mitchel: The newlines/tabs that make up my indentation were seen as plaintext by IE. Putting the img on the same line as the link tag fixed the issue.

2009-05-29 14:29:25

@Daniel - That was going to be the second guess. Glad you got it fixed.

Mitchel Sellers 2009-05-29 15:15:47

Answer 2

+3 A:

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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"&gt;
            <img src="images/someimage.jpg" alt="sometag" />
        </a>
        <a href="http://www.somelink.com"&gt;
            <img src="images/someimage.jpg" alt="sometag" />
        </a>
        <a href="http://www.somelink.com"&gt;
            <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"&gt;&lt;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.

Chris Doggett 2009-05-29 14:29:11

@Chris: Haha. You beat me by 14 seconds (see comments @Mitchel). Accepting this anyway as it is the right answer :)

2009-05-29 14:30:31

As a general rule, don't tab out inline elements, keep them on the same line in your code to avoid this and other rendering issues.

rpflo 2009-05-29 17:57:57

ansaurus

tags:

views:

answers:

Inline img with <a> causes weird issue in IE

related questions