CODEWITHSUNDEEP
htmlcss
Alain
Alain

Reputation: 1470

Why there is a - (dash) or an _ (underscore) between <a> images

Can somebody explain why I do see 2 dashes (or underscore) between my images, like this:

enter image description here

How to remove them ?

This weird behavior appears in chrome (linux), safari (mac) as well in firefox (mac).

    <html>
    <head>
        <style type="text/css" media="screen">
            ul li {
                display: inline;
            }
        </style>
    </head>
    <body style="background: none;">
        <ul clas="">
            <li>
                <a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title">
                    <img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi">
                </a>
            </li>
            <li>
                <a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title">
                    <img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi">
                </a>
            </li>
            <li>
                <a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title">
                    <img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi">
                </a>
            </li>
        </ul>
    </body>
    </html>

Upvotes: 7

Views: 4375

Answers (6)

Chase Florell
Chase Florell

Reputation: 47397

It's because it's wrapped in a link. You will have to remove the underline with CSS.

.myListWithoutUnderlines a{
    text-decoration: none;
}

.myListWithoutUnderlines li {
    display: inline;
}
<ul class="myListWithoutUnderlines">
   <li>
      <a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title">
          <img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi">
      </a>
   </li>
   <li>
      <a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title">
          <img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi">
      </a>
   </li>
   <li>
      <a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title">
          <img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi">
      </a>
   </li>
</ul>

Upvotes: 2

NFarrington
NFarrington

Reputation: 86

The underscores are caused by the browser registering a space after the image, before the closing </a> tag. To counteract this, you would need to remove the indentation:

<html>
<head>
    <style type="text/css" media="screen">
        ul li {
            display: inline;
        }
    </style>
</head>
<body style="background: none;">
    <ul class="">
        <li>
            <a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title"><img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi"></a>
        </li>
        <li>
            <a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title"><img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi"></a>
        </li>
        <li>
            <a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title"><img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi"></a>
        </li>
    </ul>
</body>
</html>

Upvotes: 2

Marc B
Marc B

Reputation: 360732

You need this html:

<a ...><img /></a>
       ^------^---- no spaces/linebreaks.

Line breaks in html source are rendered as space characters. So the standard link/underline display extends PAST your image's edges by the width of the space your line breaks are being rendered as.

Upvotes: 2

David
David

Reputation: 218877

It's not an underscore, it's the underlining of a link. Note your markup:

<a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title">
    <img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi">
</a>

Before and after the img there is whitespace within the a. If a elements are styled to be underlined, that whitespace will be underlined.

You can remove the whitespace:

<a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title"><img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi"></a>

and/or you can change the styling:

a {
    text-decoration: none;
}

Upvotes: 13

Phil Tune
Phil Tune

Reputation: 3325

The way your HTML is written, there is space after your <img> before the </a> which the browser is applying the anchor style to (the underline).

I would actually recommend doing something like (CSS) a img { display: block; float: left; }

Upvotes: 0

jmore009
jmore009

Reputation: 12923

just set text-decoration: none on a tags in your CSS

a{
  text-decoration: none;
}

Upvotes: 2

Related Questions