Where is the 'skip-link' definition?

<div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ?></a></div>

Is it being defined in that div? Not in a css file, or other place?

If that is the case, why isn’t it working? Any clues?

I have copied the ‘screen-reader-text’ definition to my css file.
And changed ‘twentyten’ to the name of my theme, question is if that name need to be defined somewhere else also?

Is it being defined in that div? Not in a css file, or other place?

Since we haven’t seen your site, there’s no way we can say for sure. The skip links are styled within style.css in the Twenty Ten theme but I have no idea what your theme has in its stylesheet.

Sorry, my bad, here is my site:
https://www.uhuru.dk/

As you can see in the menu, the ‘Skip to content’ is visible.

When I search the TwentyTen style.css, there is no ‘skip-link’ definition. That is what puzzles me, how can it work in TwentyTen?

Appreciate your time.

Br,
Jonas

If you have the css code for ‘skip-link’ which should go into ‘style.css’ I would much appreciate it.

Though I still can’t understand it, but that is 2nd prio ;o)

Br,
Jonas

Try using

.skip-link a {
position:absolute;
top:-9999px;
left:-9999px;
}
.skip-link a:active,
.skip-link a:focus {
top:9999px;
left:9999px;
}

It works, thanks a bunch.

But, when I look at other themes which are using ‘skip-link’ they don’t have those definitions in their ‘style.css’. That is what I do not understand.

Have you checked your Twenty Ten style.css? Does it contain those definitions?

From Twenty Ten’s style.css file:

/* Text meant only for screen readers */
.screen-reader-text {
	position: absolute;
	left: -9000px;
}

Not as good as the CSS I gave above as it doesn’t make the skip link available to sighted keyboard navigators. I’m hopeful that this improved CSS will be implemented in Twenty Eleven.

Mystery solved, thanks :o)

I found the ‘screen-reader-text’ first in the ‘rtl.css’ of Twenty Ten, and copied it to my ‘rtl.css’ … it did not work.

Then I started looking for the definition of ‘skip-link’ because I assumed that that was the reason to why it did not work.

As it now shows, ‘screen-reader-text’ is defined in Twenty Ten both in ‘rtl.css’ and ‘style.css’. So, now I have copied it to both of my files too, and it works without the definition of ‘skip-link’. I have kept your ‘skip-link’ definitions though.

Thanks again, much appreciated.

Br,
Jonas

In the Twentyeleven theme, the screen reader link styles are defined as:

/* Assistive text */
.assistive-text {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
}
#access a.assistive-text:active,
#access a.assistive-text:focus {
	background: #eee;
	border-bottom: 1px solid #ddd;
	color: #1982d1;
	clip: auto !important;
	font-size: 12px;
	position: absolute;
	text-decoration: underline;
	top: 0;
	left: 7.6%;
}