CODEWITHSUNDEEP
htmlcss
Birdman
Birdman

Reputation: 5414

Underscore between two image-links

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?

Upvotes: 38

Views: 22165

Answers (6)

Luc Angevare
Luc Angevare

Reputation: 35

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).

Upvotes: 0

Amin Saqi
Amin Saqi

Reputation: 18977

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;
}

Upvotes: 0

user1106352
user1106352

Reputation:

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

Upvotes: 4

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201628

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.

Upvotes: 47

IsisCode
IsisCode

Reputation: 2490

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. :)

Upvotes: 26

Quentin
Quentin

Reputation: 943650

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

Upvotes: 4

Related Questions