Eliminate blue outline on active link

Page: 1

Author Post
Member
Registered: Sep 2013
Posts: 17
This happens in Chrome not Firefox. I've tried border 0px and outline none and nothing seems to work.

Go here: http://www.portraitartist.com/sherr/portraits3.htm and click on last portrait, bottom row, right.

Now click and hold on "gallery 4" and you'll see the blue outline.

Many thanks!
Administrator
Registered: Aug 2008
Posts: 3382
When I follow your sequence using Chrome 33, I don't see any blue outline.

Regardless, this is a content html and css topic, not a Floatbox support topic.

If you are seeing the outline only after visiting a link, then it may be the outline style on the :visited pseudo-class that is defining it. That may be a browser-default rather than a user-defined style.
Member
Registered: Sep 2013
Posts: 17
I am using Chrome 33 as well. On my forms, I had to change focus with css to get the Chrome blue outline to go away when the form box was clicked. That worked fine. But no css I've tried make it go away in Chrome. Firefox does not have this problem.

In this case, none of the other links have the blue outline when the link is clicked. It's only while holding down the mouse and before letting go on these links where I have caption in a div.

It seems it must have something to do with the link being in a div. See attached where I'm holding down the mouse button, but have not yet let go.

User posted image
Administrator
Registered: Aug 2008
Posts: 3382
You've got outline:none set on the div element when it is the <a> element that is showing the active outline. You need to set outline:none on that.

By the way, it's actually illegal HTML to place a div (a block element) inside a link (an inline element).
Member
Registered: Sep 2013
Posts: 17
Thanks for the tip on divs. I'm fairly new to using them. Well, I had border 0px on a statement, just didn't go far enough and use outline none.

Many thanks.

Page: 1