Underscore between two image-links
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. :)
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.