Question

I have a strange bug when looking at my homepage in Chrome. The bug doesn’t seem to appear when I try to edit it with CSSEdit:

I attached the pictures to show you what I mean. Those “points” next to the icons are linked as well.

What could be causing this error?

Thanks for the help!

EDIT sure here’s the code (the page isn’t online):

 <div class="rss">
      <p>
         <a href="http://linkto">
             <img src="/images/facebook.png" alt="Find me on facebook" />
          </a>
          <a href="http://linkto">
            <img src="/images/twitter.png" alt="Follow me on twitter" />
          </a>
         <a href="http://linkto">
            <img src="/images/rss.png" alt="Subscribe to RSS Feed" />
          </a>
      </p>
</div>

which is wrapped in a div class called footer. And the CSS

.site .footer {
font-size: 80%;
color: #666;
border-top: 4px solid #eee;
margin-top: 2em;
overflow: hidden;
}

 .site .footer .rss {
  margin-top: 0em;
  margin-right: -.2em;
  float: right;
  }

.site .footer .rss img {
  border: 0;
}

Sorry for the strange formatting.

Answer 1

Those “points” are the text-decoration:underline portion of your CSS being applied to <a> tags. The reason you only see part of it is because the image you are using is covering the majority of it.

Try putting this in your CSS:

.rss a { text-decoration:none }
.rss a img { border:none; outline:none }