View Full Version : image as a link : faint residual dotted box - how do you remove it?

dreamweaver beginner
09-28-2009, 07:06 PM

I've been working on having an image be a link to an external website. It's working functionally fine.

But I notice this weird "pixel residue". Say the image is about 50x70 pixels. When I click on the link, a very thin dotted line about 50x90 pixels appears around the image. It's the color of the "active" link. It's the right height, but it's too wide to the left and right.

Then when I back-button after clicking through to the external site, the dotted line box is still there, this time the color of the "already clicked" link setting.

These images are in a column div container, and it looks like this dotted line is going to the edges of the div container.

It's almost like the link understands there is a rectangular image/link box there, and shows its understanding by using a dotted line to surround it when you click on it. But it's declaring the size of the box to be the full width of the div container, rather than the exact width of the image.

This was similar to a problem I was having with a text link becoming gigantic when you click on that (I had the text when clicked set to 100px instead of 100 percent by mistake). That one's been fixed. But I can't figure out how to fix this one.

Any ideas?

09-29-2009, 04:39 AM
This is a browser feature, not an error. Go to another site and you'll see the same dotted line when you click a link. Even a text link. 8)

dreamweaver beginner
09-29-2009, 06:23 AM
thanks for letting me know. i would have thought it was a code issue.

what's really unsightly is when you back-button it's still there! looks really tacky until you click somewhere on the page.

interestingly, the dotted line seems to go to the edge of the div container. if i have the images be the exact same width as the div container, maybe it would make the dotted line be exactly around the image instead of going out past the left and right edges of the image. that wouldn't be so bad.

dreamweaver beginner
09-29-2009, 07:02 PM
i noticed on professional websites that the dotted line appears around the link text or link image when you click on it. but when you hit the back button, it's no longer there.

the dotted link around my link text or link image stays there even when you hit the back button after clicking through to the link. it only goes away when you click on another part of the page.

i can live with the dotted lines during the click through process. but how do you get rid of the dotted line staying there?

09-30-2009, 07:51 AM
Difficult to know without seeing the site. Can you post a link please?

dreamweaver beginner
09-30-2009, 06:15 PM

I'm new at this, so I'll set up a practice website that is "live" on the internet. I've been thinking of doing that anyway.

09-30-2009, 08:57 PM

I'm new at this, so I'll set up a practice website that is "live" on the internet. I've been thinking of doing that anyway.

So can you post a link for people to see the problem?

10-27-2009, 09:39 PM
I was looking around and found a fix to this problem. It actually gets rid of that thin dotted box that sits around your link image. In your styles (including the link, hover, focus, and action) put this in outline:0; and there you go!

10-28-2009, 12:01 AM
You're not 'fixing a problem', you're removing a browser function that is there for a reason 8)

10-28-2009, 12:07 AM
Oh ... Sorry still consider myself new at this. Got a questions though, what function is that removing and is it critical. In other words if I am simply concerned with the cosmetic look of that link button would it be Ok to remove it or am i starting the self-destruct sequence of the internets ? O.o

10-28-2009, 12:45 AM
Not 'critical', per se. You're removing the dotted line which indicates that a link has focus. It's a usability concern. Not everyone uses a mouse. Usability concerns should normally weight more than your issues with browser features. Respect your users, you did not make the website only for yourself ;)

10-28-2009, 05:26 AM
Would a customized focus be adequate? I replaced the focus to slightly highlight the button/link so that the visitor would know what was selected. The hover works the same. Just trying to make a cool effect :) .