ernesto50
ernesto50

Reputation: 131

Float bug in Chrome?

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:

enter image description here

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

enter image description here

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.

Upvotes: 0

Views: 1785

Answers (1)

dmackerman
dmackerman

Reputation: 2966

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 }

Upvotes: 1

Related Questions