Make WordPress Core

Opened 8 years ago

Closed 8 years ago

Last modified 8 years ago

#13643 closed defect (bug) (fixed)

[twentyten] CSS RTL conflict with "Skip to content" accessibility link

Reported by: Ornani Owned by: yoavf
Milestone: WordPress.org Priority: normal
Severity: normal Version: 3.0
Component: Themes Keywords: needs-rtl
Focuses: Cc:


While developing a twentyten child theme in Hebrew, I encountered this bug.

When a language such as Hebrew that is written from right to left is used in WordPress, it automatically links to the theme's rtl.css file if available.

In the current twentyten theme, the rtl.css file makes the "Skip to content" link clickable.

From twentyten's rtl.css:

/* Text meant only for screen readers */
.screen-reader-text {
	left: auto;

This "left: auto" property overrides the style.css left property.

From twentyten's style.css:

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

The link is there and it is clickable but there is no text thanks to the text-indent and overflow properties.

Mouseover screenshot:

Google chromes inspect element (Chrome's firebug equivalent):

You can easily reproduce this problem by installing a fresh WP3-RC1, then copying he_IL's language files to wp-content/languages, and editing the WPLANG in wp-config to "he_IL".

Solution - delete the following lines from rtl.css:

/* Text meant only for screen readers */
.screen-reader-text {
	left: auto;

Attachments (2)

ie6.patch (516 bytes) - added by ocean90 8 years ago.
ie6_and_cleanup.patch (2.3 KB) - added by ocean90 8 years ago.

Download all attachments as: .zip

Change History (20)

#1 @nacin
8 years ago

  • Cc iammattthomas yoavf added
  • Keywords rtl twentyten css removed
  • Owner set to iammattthomas
  • Status changed from new to assigned

#2 @nacin
8 years ago

  • Component changed from General to Themes

#3 @nacin
8 years ago

  • Keywords needs-rtl added

#4 @yoavf
8 years ago

  • Owner changed from iammattthomas to yoavf
  • Status changed from assigned to accepted

@Ornani thanks for the report.

This is a workaround because

	left: -9000px;

behaves differently in every browser when in RTL mode. In IE you'll end up having horizontal scrollbars and the text will be visible.

Another solution would be to use {{{


on scree-reader-text in RTL but that may results in a loss of accessibility.

#5 @nacin
8 years ago

Could we use left:auto; right:-9000px, which is the way Twenty Ten works in LTR? I've generally seen text-indent used as a technique personally, not absolute positioning, so I'm not sure.

#6 @yoavf
8 years ago

@nacin that's just the other way around - same problem in other browsers.

#7 @Ornani
8 years ago

yoavf - you are right.
I have done some research on this topic and I've found this article:

This is the patch that is working for me and I think should be used (rtl.css):

/* Text meant only for screen readers */
.screen-reader-text {
	left: auto;

.screen-reader-text a {

.screen-reader-text a:focus{

#8 @Ornani
8 years ago

I have found another CSS bug, but it's kind of tiny so I didn't open a new ticket for it.
In IE6, the menu is not rendered properly. Screenshot taken from http://2010dev.wordpress.com/ (you can visit it using IE6 to see it for yourself):

The fix is the following (added to style.css):

* html #access .menu-header,
* html div.menu {
	display: inline;

This is caused by a very known IE6 bug, just google for something like "IE6 float double margin".

#9 @nacin
8 years ago

We don't need to hack that in with * html. We can just add display: inline to whichever declaration we're also floating.

#10 @Ornani
8 years ago

Maybe, I just didn't want to touch any working stuff for the other browsers.

I have seen this hack being used in the style.css file so I thought it's not a problem to use it once again.

#11 @nacin
8 years ago

  • Component changed from Themes to RTL

#12 @ocean90
8 years ago

I have added a patch for the IE 6 bug. Need the float: left for the modern browsers.

#13 @nacin
8 years ago

  • Component changed from RTL to Themes
  • Milestone changed from 3.0 to WordPress.org site

Going to handle this through the themes repo.

8 years ago

#14 @iandstewart
8 years ago

This isn't the double-margin bug (it only affects floated elements with margin on the same side as the float) but it's still IE6 weirdness. These two elements inherit their width from the parent element and then we're pushing it over with margin. Every other browser hides the overflow on the right. IE6, of course, doesn't. That's what we're seeing. Adding a width 12px less than the margin should fix this IE6 w/o any problems in modern browsers.

#access .menu-header,
div.menu {

font-size: 13px;
margin-left: 12px;
width: 928px;


#15 @ocean90
8 years ago

iandstewart, yes that works nice. I have included it in my patch. I also removed the redundant selectors and maked it more clearer.

#16 @ocean90
8 years ago

Sry, I forget the fallback. So width hack is okay.

#17 @iandstewart
8 years ago

  • Resolution set to fixed
  • Status changed from accepted to closed

This will be addressed in the version of Twenty Ten in the Themes Directory.

#18 @louyx
8 years ago

  • Cc louyx added

Well, I've made a plugin that automatically generates the rtl.css file, i think it should be used for generating the rtl.css file of the twenty ten theme, i've tested it and it works just fine. you may want to use it to avoid such bugs in next versions.


Note: See TracTickets for help on using tickets.