Images & Hyperlink Borders - Ghost 1px x 1px Border

Question

I've an image that is wrapped in an anchor tag that, through jQuery, triggers an action somewhere else on the page. When I click on the image, two tiny 1px by 1px boxes show up in the upper and lower left corners of the image.

My CSS styles explicitly state no borders for images: a,img { border: 0; }

It also seems to only happen in Firefox 3. Anyone else had this issue?

---

Here's a screenshot of the left part of the image (the graphic has a white background):

alt text http://neezer.net/img/ss.png

It's not the background, or the border of any other element. I checked.

Answer 1

I've chalked this up to a bug with Firefox 3 & jQuery 1.2.6, since I've yet to replicate it with any other version of Firefox or jQuery.

Answer 2

Is your anchor tag under or overlining?

Set the a and a:hover in that situation to text-decoration: none.

Happened to me, and the reason it was two tiny boxes is because the width of the element didn't quite extend, or something.

Good luck!

D'oh: I see it's upper- and lower- LEFT boxes. Might be something else, like background or border of containing element peeking through.

Answer 3

Have you tried also setting border-style:none;? It's a long shot, but you never know...

Answer 4

What is the display property of the anchor element? You can try setting display property of as "block" and make sure that the inner IMG elements float setting is set to "none".