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?
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.
Are you talking about the dotted border that is visible when a link is active?
Have you tried also setting border-style:none;? It's a long shot, but you never know...
No, that doesn't seem to do anything.
Interestingly enough, I just noticed I get the same little boxes if the image doesn't load and only the alt text is displayed; the boxes are still justified to the top and bottom left corners of the content.
Could jQuery be screwing something up?
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".