Birdman Birdman - 10 months ago 107
CSS Question

Underscore between two image-links

I have the following HTML code inside a div:

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

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?


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=""><img src="images/php-power-micro2.png" 
  alt="PHP powered" border="0" title="PHP" /></a>
<a href=""><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.