38

I have the following HTML code inside a div:

<a href="http://www.mysql.com">
<img src="images/php-power-micro2.png" alt="Image not available" title="PHP" border="0"/>
</a>
<a href="http://www.php.net"> 
<img src="images/mysql-power.jpg" alt="Image not available" border="0" title="MySQL"/>
</a>

Which results in the following output with an underscore!? between them:

If I use only one image-link the underscore disappears.

Why is this happening and how can I get rid of the underscore?

2
  • 3
    The alt attribute is supposed to convey the same meaning as the image, not tell the user that there is supposed to be an image there.
    – Quentin
    Commented Jan 25, 2012 at 14:07
  • Also, is this HTML or XHTML? Don't mix them up.
    – Mr Lister
    Commented Jan 25, 2012 at 14:10

6 Answers 6

47

The underscore is one or more underlined space characters. The fix is to remove anything that might be taken as a space inside an a element, such as a line break. A line break and other whitespaceinside a tag (between < and >) is OK, though:

<a href="http://www.mysql.com"><img src="images/php-power-micro2.png" 
  alt="PHP powered" border="0" title="PHP" /></a>
<a href="http://www.php.net"><img src="images/mysql-power.jpg"
  alt="MySQL powered" border="0" title="MySQL"/ ></a>

This means that there is still a line break between the a elements, and browsers generally treat it as a space. In this case, this probably does not matter, since the space is outside a elements and thus won’t be underlined; it just causes a little spacing. But to make the images more clearly separate, consider adding padding-left on the second a element.

1
  • Yup, whitespace inside the a tag was the problem. Commented Jan 25, 2012 at 15:51
26

The 'underscore' is in fact underlining of the 'a' tag. It's a style applied by browsers to indicate a hyperlink. To get rid of the underline but keep the hyperlink, style the 'a' tag.

a{text-decoration:none;}

You'll probably have other links on the page too, so it's a good idea to give these links a class so they can be styled separately.

<a class="imageLink" href="http://www.mysql.com">
  <img src="images/php-power-micro2.png" alt="Image not available" title="PHP" border="0"/>
</a>
<a class="imageLink" href="http://www.php.net"> 
  <img src="images/mysql-power.jpg" alt="Image not available" border="0" title="MySQL"/>
</a>

And then do something like this:

a.imageLink{
    text-decoration:none;
}

Alternatively, you could use inline styles:

<a style="text-decoration:none;" class="imageLink" href="http://www.mysql.com">

Apologies if you already know this and it seems obvious, I just wanted to give a clear answer. :)

1
  • This answer works much better for me, because my IDE will reformat the HTML I have laid out (trying to be helpful and keep things looking tidy)... and when it moves things around it will sometimes add whitespace. This CSS solution fixes the issue under all cases. Commented Mar 25, 2014 at 18:50
4

Remove the white space between the start and end tags of the anchors and the images they contain.

4

You can either remove the text decoration by using the following css

a
{
text-decoration: none;
}

or you can remove the white space between the image and the anchor tags.

Both will fix the issue

0

Removing text-decoration for those a tags is enough - no need to reduce readability of your markup by removing newlines and indents.

But remember to remove that style for hover too:

a, a:hover
{
    text-decoration: none;
}
0

I had the same problem a few times. I tried everything to solve it... What you have to do is add text-decoration: none; to your a-tag (not the picture).

Not the answer you're looking for? Browse other questions tagged or ask your own question.