Browse files

CSS: Rewrote .ui-helper-hidden-accessible base on HTML5 Boilerplate. …

…Fixes #4623 - CSS: ui-helper-hidden-accessible affects page layout.
  • Loading branch information...
1 parent d23fe49 commit a9d854967f0175b4c4b8a48c76a71d0fd1028680 @scottgonzalez scottgonzalez committed Nov 22, 2010
Showing with 1 addition and 1 deletion.
  1. +1 −1 themes/base/jquery.ui.core.css
@@ -11,7 +11,7 @@
/* Layout helpers
.ui-helper-hidden { display: none; }
-.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
+.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }

7 comments on commit a9d8549

If possible, don't include clip: rect(1px,1px,1px,1px);. The only reason people include both versions of clip is because version with commas is spec valid. However, some IEs can't read clip with commas, and every browser can read the one without commas, so what point is there to include the comma version if you're going invalidate your css with the commas-less version anyway? I say, take it out.


scottgonzalez replied Nov 22, 2010

It seems like removing the version with commas would prevent us from ensuring forward-compatibility.


kflorence replied Apr 2, 2011

This is giving me issues in Firefox 3.6.16 in Ubuntu, specifically with the datepicker, which remains in an invisible state unless you apply "clip: auto" to the element.


rdworth replied Apr 4, 2011

I was not able to reproduce any issue in Firefox 3.6.16 in Ubuntu 10.10 using


kflorence replied Apr 4, 2011

That datepicker does not have the "ui-helper-hidden-accessible" class applied to it, which is the class causing the problem. I wonder why mine does...


kflorence replied Apr 4, 2011


That would be why. I guess I have a newer theme coupled with an older version of the datepicker. Thanks for your help.

The above fix worked for me. I have tested with the latest versions of Chrome, Firefox, Safari, and IE8
.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }

Please sign in to comment.