maximutan maximutan - 5 months ago 17
CSS Question

Little Box between List Image

I've got a problem with my website.
I added some Social Media Image Buttons in my Website and always those little
boxes changing colors appear beside them. I don't know how to fix this.

Did you get any ideas?

Here's the image link:
http://i.imgur.com/HD9AqLv.png

The HTML snippet

<div class="social">
<ul>
<li> <a href="#"> <img src="assets/Android.png" alt="Smiley face" height="42" width="42"> </a> </li>
<li> <a href="#"> <img src="assets/GitHub.png" alt="Smiley face" height="42" width="42"> </a> </li>
<li> <a href="#"> <img src="assets/GooglePlus.png" alt="Smiley face" height="42" width="42"> </a> </li>
<li> <a href="#"> <img src="assets/LinkedIn.png" alt="Smiley face" height="42" width="42"> </a> </li>
<li> <a href="#"> <img src="assets/Mail.png" alt="Smiley face" height="42" width="42"> </a> </li>
<li> <a href="#"> <img src="assets/Reddit.png" alt="Smiley face" height="42" width="42"> </a> </li>
<li> <a href="#"> <img src="assets/YouTube.png" alt="Smiley face" height="42" width="42"> </a> </li>
</ul>

</div>


The CSS snippet

.social{
float: right;
padding-top: 1.1rem;
}

.social ul{
list-style: none;
display: inline;
}

.social li{
padding-left: 10px;

display: inline;
}


At the end of the day, I don't even think it has something to do with that code. Maybe it's just a general error.

Answer

I think what you see there is the browser's default underline for anchor tags. Adding this css style should get rid of those:

.social li a{
  text-decoration: none;
}