Unwanted effect noticed with in-page linking.

What css property is causing this?

[Broadway]

I'm working with a new WordPress theme, and evidently there is some sort of directive in a styles.css file that I am unfamiliar with and need help knowing what to change so I get what I consider more "normal" behavior.
-

In my html, I often use this kind of in-page linking:

<a href="#page-jump">Jump ahead</a>

Which then takes the visitor to this location:

<h3 id="page-jump">Continue reading here.</h3>

or sometimes I use this type of destination:

<div id="page-jump">Continue reading here.</div>
--

With Chrome (desktop), when you click the link to jump ahead, if the destination is a <div>, it outlines the complete div, as if it has a border (which it doesn't).

When using Android Chrome, you get the same outline behavior of div's.
If the link is to an <h3> tag, the color of the text in the h-tag changes (which is my bigger problem).

--

I don't get what this behavior is.

I've discovered css directives like h3:active, but that doesn't really explain what's going on here.

What is the css effect/property involved that I need to fiddle with to stop this effect?

Thanks.

[robzilla]

It's probably the outline property you're looking for.

It is often used for accessibility reasons, to emphasize a link when tabbed to without affecting positioning and in a different way than hover.

[...]

outline is used for :focus styles by default. Remember if you ever remove outline styles, like a:focus { outline: 0; }, you need to add them back in using some other kind of visually distinct style.

[css-tricks.com...]

[not2easy]

If the id is actually

<div id="page-jump">

then you would want to find

#page-jump

in the css file to see what to adjust.

[NickMNS]

@not2easy
I'm not sure. Generally what you are saying should be true but in this case, it is unlikely that the css would be targeting a specific ID. More than likely the css styling would apply regardless of the specific id.

The :focus would be a good place start. Given that this is a "theme", could it be applied with Javascript? I have certainly done that in the past. I would change the background color and then fade it back to the original.

[Broadway]

Thank you everyone.

Yes, the id's like #page-jump that I'm using here don't exist in any css file, they don't have any associated css properties. I'm just using them as locations to jump to. They're declared ad hoc on each page (#about-boats, #about-cars, #about-tires, etc...).

One aspect of the effect I had noticed did turn out to be due to my theme's manipulation of the "outline" property.

I was able to get rid of the effect by setting things to "outline-width:0 !important;" for some very specific associated css classes (since the involved id's can vary so much from page to page).

But then I reread robzilla's reply and interpreted that as meaning that the creation of the outline effect was a courtesy to the site visitor so to help them realize what location they had jumped to. So I reverted that, thinking it was a best practice, just different than I was used to seeing.

The biggest problem I was having was when the id was attached to an h-tag, and the effect was changing the color of the font to one where it couldn't be read (my larger h-tags have a dark background, the smaller ones don't). Declaring "color:#fff !important;" for the larger h-tags solved that.

And finally, when searching through the css file (now knowing what to look for), I finally noticed this, which I guess is the culprit.

/* Display outline on focus */
:focus {
color: #333;
outline: #ccc solid 1px;
}

Thanks again.