Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Underscore between two image-links

Tags:

html

css

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?

like image 678
Birdman Avatar asked Jan 25 '12 14:01

Birdman


People also ask

What is the tag for combining images and hyperlinks?

If you have an image you want to make into a link, use the <a> element and reference the image file with the <img> element. Note: You'll find out more about using images on the Web in a future article.

How do you combine images and links in HTML?

To create an image link, you combine an <a> tag (i.e. link) with an <img> tag (i.e. image). You simply "wrap" the link code around the image code.

How do I link an image to another image in HTML?

Complete HTML/CSS Course 2022 To use image as a link in HTML, use the <img> tag as well as the <a> tag with the href attribute. The <img> tag is for using an image in a web page and the <a> tag is for adding a link. Under the image tag src attribute, add the URL of the image. With that, also add the height and width.


1 Answers

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.

like image 103
Jukka K. Korpela Avatar answered Oct 04 '22 07:10

Jukka K. Korpela