Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Site updated at 2012-11-10 22:45:45 UTC

  • Loading branch information...
commit d74118684faa1be5924c9bc9d4a84428a00c06ee 1 parent 7ece82b
@tjvantoll authored
Showing with 1,427 additions and 975 deletions.
  1. +4 −4 2012/02/20/CSS3-Color-Animations/index.html
  2. +4 −4 2012/02/27/Making-a-3D-Picture-Cube-with-CSS3/index.html
  3. +4 −4 2012/03/08/IE7-Attribute-Selector-Bugs/index.html
  4. +4 −4 2012/03/17/Styling-Disabled-Form-Fields/index.html
  5. +4 −4 2012/03/21/javascript-for-the-java-developer/index.html
  6. +4 −4 2012/05/02/showmodaldialog-what-it-is-and-why-you-should-never-use-it/index.html
  7. +4 −4 2012/06/10/browser-css-parsing-discrepancies/index.html
  8. +4 −4 2012/06/15/detecting-print-requests-with-javascript/index.html
  9. +4 −4 2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to-jquery-ui/index.html
  10. +4 −4 2012/07/07/the-ideal-less-workflow-with-git/index.html
  11. +4 −4 2012/07/10/default-browser-handling-of-the-css-text-transform-property/index.html
  12. +4 −4 2012/07/15/native-html5-number-picker-vs-jquery-uis-spinner-which-to-use/index.html
  13. +4 −4 2012/07/19/dom-element-references-as-global-variables/index.html
  14. +4 −4 2012/08/05/html5-form-validation-showing-all-error-messages/index.html
  15. +4 −4 2012/08/10/less-101-the-basics-of-the-css-preprocessor/index.html
  16. +4 −4 2012/08/16/subpixel-animation-issues-in-ie-less-than-9/index.html
  17. +4 −4 2012/08/19/onscroll-event-issues-on-mobile-browsers/index.html
  18. +4 −4 2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/index.html
  19. +4 −4 2012/08/28/google-analytics-excluding-visits-in-development-and-production/index.html
  20. +4 −4 2012/08/30/html5-form-validation-start-using-it-in-production-applications/index.html
  21. +4 −4 2012/09/14/using-jquery-ui-slider-to-polyfill-html5-input-type-range/index.html
  22. +4 −4 2012/09/19/using-the-attribute-selector-with-numeric-values/index.html
  23. +4 −4 2012/10/17/maxlength-constraint-validation-oddities/index.html
  24. +4 −4 2012/10/23/front-end-efficiency-the-top-ten/index.html
  25. +4 −4 2012/10/24/adding-pointers-to-jquery-ui-tooltips/index.html
  26. +6 −4 2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/index.html
  27. +405 −0 2012/11/10/creating-cross-browser-scrollable-tbody/index.html
  28. +106 −225 atom.xml
  29. +20 −6 blog/archives/index.html
  30. +89 −166 blog/categories/browsers/atom.xml
  31. +18 −4 blog/categories/browsers/index.html
  32. +89 −276 blog/categories/css/atom.xml
  33. +18 −4 blog/categories/css/index.html
  34. +1 −1  blog/categories/efficiency/atom.xml
  35. +4 −4 blog/categories/efficiency/index.html
  36. +1 −1  blog/categories/forms/atom.xml
  37. +4 −4 blog/categories/forms/index.html
  38. +1 −1  blog/categories/git/atom.xml
  39. +4 −4 blog/categories/git/index.html
  40. +104 −0 blog/categories/html/atom.xml
  41. +245 −0 blog/categories/html/index.html
  42. +1 −1  blog/categories/html5/atom.xml
  43. +4 −4 blog/categories/html5/index.html
  44. +1 −1  blog/categories/java/atom.xml
  45. +4 −4 blog/categories/java/index.html
  46. +1 −1  blog/categories/javascript/atom.xml
  47. +4 −4 blog/categories/javascript/index.html
  48. +1 −1  blog/categories/jquery-ui/atom.xml
  49. +4 −4 blog/categories/jquery-ui/index.html
  50. +1 −1  blog/categories/less/atom.xml
  51. +4 −4 blog/categories/less/index.html
  52. +1 −1  blog/categories/mobile/atom.xml
  53. +4 −4 blog/categories/mobile/index.html
  54. +1 −1  blog/categories/qunit/atom.xml
  55. +4 −4 blog/categories/qunit/index.html
  56. +1 −1  blog/categories/speaking/atom.xml
  57. +4 −4 blog/categories/speaking/index.html
  58. +1 −1  blog/categories/unit-testing/atom.xml
  59. +4 −4 blog/categories/unit-testing/index.html
  60. +52 −48 blog/index.html
  61. +48 −58 blog/page/2/index.html
  62. +52 −5 blog/page/3/index.html
  63. BIN  images/posts/2012-11-10/Alignment-Issue.png
  64. +4 −4 index.html
  65. +0 −8 jug/index.html
  66. +7 −3 sitemap.xml
  67. +4 −4 speaking/index.html
View
8 2012/02/20/CSS3-Color-Animations/index.html
@@ -455,6 +455,10 @@ <h1 class="entry-title">CSS3 Color Animations</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/">Creating a Polished Vertical Tabs Interaction with jQuery UI</a>
</li>
@@ -490,10 +494,6 @@ <h1 class="entry-title">CSS3 Color Animations</h1>
<a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
</li>
- <li class="post">
- <a href="/2012/08/19/onscroll-event-issues-on-mobile-browsers/">onscroll Event Issues on Mobile Browsers</a>
- </li>
-
</ul>
</section>
View
8 2012/02/27/Making-a-3D-Picture-Cube-with-CSS3/index.html
@@ -531,6 +531,10 @@ <h1 class="entry-title">Making a 3D Picture Cube with CSS3</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/">Creating a Polished Vertical Tabs Interaction with jQuery UI</a>
</li>
@@ -566,10 +570,6 @@ <h1 class="entry-title">Making a 3D Picture Cube with CSS3</h1>
<a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
</li>
- <li class="post">
- <a href="/2012/08/19/onscroll-event-issues-on-mobile-browsers/">onscroll Event Issues on Mobile Browsers</a>
- </li>
-
</ul>
</section>
View
8 2012/03/08/IE7-Attribute-Selector-Bugs/index.html
@@ -392,6 +392,10 @@ <h1 class="entry-title">IE7 Attribute Selector Bugs</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/">Creating a Polished Vertical Tabs Interaction with jQuery UI</a>
</li>
@@ -427,10 +431,6 @@ <h1 class="entry-title">IE7 Attribute Selector Bugs</h1>
<a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
</li>
- <li class="post">
- <a href="/2012/08/19/onscroll-event-issues-on-mobile-browsers/">onscroll Event Issues on Mobile Browsers</a>
- </li>
-
</ul>
</section>
View
8 2012/03/17/Styling-Disabled-Form-Fields/index.html
@@ -493,6 +493,10 @@ <h1 class="entry-title">Styling Disabled Form Fields</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/">Creating a Polished Vertical Tabs Interaction with jQuery UI</a>
</li>
@@ -528,10 +532,6 @@ <h1 class="entry-title">Styling Disabled Form Fields</h1>
<a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
</li>
- <li class="post">
- <a href="/2012/08/19/onscroll-event-issues-on-mobile-browsers/">onscroll Event Issues on Mobile Browsers</a>
- </li>
-
</ul>
</section>
View
8 2012/03/21/javascript-for-the-java-developer/index.html
@@ -196,6 +196,10 @@ <h1 class="entry-title">JavaScript for the Java Developer</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/">Creating a Polished Vertical Tabs Interaction with jQuery UI</a>
</li>
@@ -231,10 +235,6 @@ <h1 class="entry-title">JavaScript for the Java Developer</h1>
<a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
</li>
- <li class="post">
- <a href="/2012/08/19/onscroll-event-issues-on-mobile-browsers/">onscroll Event Issues on Mobile Browsers</a>
- </li>
-
</ul>
</section>
View
8 2012/05/02/showmodaldialog-what-it-is-and-why-you-should-never-use-it/index.html
@@ -396,6 +396,10 @@ <h1 class="entry-title">window.showModalDialog: What It is and Why You Should Ne
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/">Creating a Polished Vertical Tabs Interaction with jQuery UI</a>
</li>
@@ -431,10 +435,6 @@ <h1 class="entry-title">window.showModalDialog: What It is and Why You Should Ne
<a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
</li>
- <li class="post">
- <a href="/2012/08/19/onscroll-event-issues-on-mobile-browsers/">onscroll Event Issues on Mobile Browsers</a>
- </li>
-
</ul>
</section>
View
8 2012/06/10/browser-css-parsing-discrepancies/index.html
@@ -411,6 +411,10 @@ <h1 class="entry-title">Browser CSS Parsing Discrepancies</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/">Creating a Polished Vertical Tabs Interaction with jQuery UI</a>
</li>
@@ -446,10 +450,6 @@ <h1 class="entry-title">Browser CSS Parsing Discrepancies</h1>
<a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
</li>
- <li class="post">
- <a href="/2012/08/19/onscroll-event-issues-on-mobile-browsers/">onscroll Event Issues on Mobile Browsers</a>
- </li>
-
</ul>
</section>
View
8 2012/06/15/detecting-print-requests-with-javascript/index.html
@@ -528,6 +528,10 @@ <h1 class="entry-title">Detecting Print Requests with JavaScript</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/">Creating a Polished Vertical Tabs Interaction with jQuery UI</a>
</li>
@@ -563,10 +567,6 @@ <h1 class="entry-title">Detecting Print Requests with JavaScript</h1>
<a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
</li>
- <li class="post">
- <a href="/2012/08/19/onscroll-event-issues-on-mobile-browsers/">onscroll Event Issues on Mobile Browsers</a>
- </li>
-
</ul>
</section>
View
8 2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to-jquery-ui/index.html
@@ -314,6 +314,10 @@ <h1 class="entry-title">Creating a Native HTML 5 Datepicker with a Fallback to j
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/">Creating a Polished Vertical Tabs Interaction with jQuery UI</a>
</li>
@@ -349,10 +353,6 @@ <h1 class="entry-title">Creating a Native HTML 5 Datepicker with a Fallback to j
<a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
</li>
- <li class="post">
- <a href="/2012/08/19/onscroll-event-issues-on-mobile-browsers/">onscroll Event Issues on Mobile Browsers</a>
- </li>
-
</ul>
</section>
View
8 2012/07/07/the-ideal-less-workflow-with-git/index.html
@@ -503,6 +503,10 @@ <h1 class="entry-title">The Ideal LESS Workflow with git</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/">Creating a Polished Vertical Tabs Interaction with jQuery UI</a>
</li>
@@ -538,10 +542,6 @@ <h1 class="entry-title">The Ideal LESS Workflow with git</h1>
<a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
</li>
- <li class="post">
- <a href="/2012/08/19/onscroll-event-issues-on-mobile-browsers/">onscroll Event Issues on Mobile Browsers</a>
- </li>
-
</ul>
</section>
View
8 2012/07/10/default-browser-handling-of-the-css-text-transform-property/index.html
@@ -364,6 +364,10 @@ <h1 class="entry-title">Default Browser Handling of the CSS text-transform Prope
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/">Creating a Polished Vertical Tabs Interaction with jQuery UI</a>
</li>
@@ -399,10 +403,6 @@ <h1 class="entry-title">Default Browser Handling of the CSS text-transform Prope
<a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
</li>
- <li class="post">
- <a href="/2012/08/19/onscroll-event-issues-on-mobile-browsers/">onscroll Event Issues on Mobile Browsers</a>
- </li>
-
</ul>
</section>
View
8 2012/07/15/native-html5-number-picker-vs-jquery-uis-spinner-which-to-use/index.html
@@ -514,6 +514,10 @@ <h1 class="entry-title">Native HTML5 Number Picker and jQuery UI's Spinner - Whi
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/">Creating a Polished Vertical Tabs Interaction with jQuery UI</a>
</li>
@@ -549,10 +553,6 @@ <h1 class="entry-title">Native HTML5 Number Picker and jQuery UI's Spinner - Whi
<a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
</li>
- <li class="post">
- <a href="/2012/08/19/onscroll-event-issues-on-mobile-browsers/">onscroll Event Issues on Mobile Browsers</a>
- </li>
-
</ul>
</section>
View
8 2012/07/19/dom-element-references-as-global-variables/index.html
@@ -568,6 +568,10 @@ <h1 class="entry-title">DOM Element References as Global Variables</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/">Creating a Polished Vertical Tabs Interaction with jQuery UI</a>
</li>
@@ -603,10 +607,6 @@ <h1 class="entry-title">DOM Element References as Global Variables</h1>
<a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
</li>
- <li class="post">
- <a href="/2012/08/19/onscroll-event-issues-on-mobile-browsers/">onscroll Event Issues on Mobile Browsers</a>
- </li>
-
</ul>
</section>
View
8 2012/08/05/html5-form-validation-showing-all-error-messages/index.html
@@ -395,6 +395,10 @@ <h1 class="entry-title">HTML5 Form Validation - Showing All Error Messages</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/">Creating a Polished Vertical Tabs Interaction with jQuery UI</a>
</li>
@@ -430,10 +434,6 @@ <h1 class="entry-title">HTML5 Form Validation - Showing All Error Messages</h1>
<a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
</li>
- <li class="post">
- <a href="/2012/08/19/onscroll-event-issues-on-mobile-browsers/">onscroll Event Issues on Mobile Browsers</a>
- </li>
-
</ul>
</section>
View
8 2012/08/10/less-101-the-basics-of-the-css-preprocessor/index.html
@@ -196,6 +196,10 @@ <h1 class="entry-title">LESS 101 - The Basics of the CSS Preprocessor</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/">Creating a Polished Vertical Tabs Interaction with jQuery UI</a>
</li>
@@ -231,10 +235,6 @@ <h1 class="entry-title">LESS 101 - The Basics of the CSS Preprocessor</h1>
<a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
</li>
- <li class="post">
- <a href="/2012/08/19/onscroll-event-issues-on-mobile-browsers/">onscroll Event Issues on Mobile Browsers</a>
- </li>
-
</ul>
</section>
View
8 2012/08/16/subpixel-animation-issues-in-ie-less-than-9/index.html
@@ -278,6 +278,10 @@ <h1 class="entry-title">Subpixel Animation Issues in IE < 9</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/">Creating a Polished Vertical Tabs Interaction with jQuery UI</a>
</li>
@@ -313,10 +317,6 @@ <h1 class="entry-title">Subpixel Animation Issues in IE < 9</h1>
<a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
</li>
- <li class="post">
- <a href="/2012/08/19/onscroll-event-issues-on-mobile-browsers/">onscroll Event Issues on Mobile Browsers</a>
- </li>
-
</ul>
</section>
View
8 2012/08/19/onscroll-event-issues-on-mobile-browsers/index.html
@@ -331,6 +331,10 @@ <h1 class="entry-title">onscroll Event Issues on Mobile Browsers</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/">Creating a Polished Vertical Tabs Interaction with jQuery UI</a>
</li>
@@ -366,10 +370,6 @@ <h1 class="entry-title">onscroll Event Issues on Mobile Browsers</h1>
<a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
</li>
- <li class="post">
- <a href="/2012/08/19/onscroll-event-issues-on-mobile-browsers/">onscroll Event Issues on Mobile Browsers</a>
- </li>
-
</ul>
</section>
View
8 2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/index.html
@@ -544,6 +544,10 @@ <h1 class="entry-title">Logging Test Failures in a PhantomJS QUnit Runner</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/">Creating a Polished Vertical Tabs Interaction with jQuery UI</a>
</li>
@@ -579,10 +583,6 @@ <h1 class="entry-title">Logging Test Failures in a PhantomJS QUnit Runner</h1>
<a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
</li>
- <li class="post">
- <a href="/2012/08/19/onscroll-event-issues-on-mobile-browsers/">onscroll Event Issues on Mobile Browsers</a>
- </li>
-
</ul>
</section>
View
8 2012/08/28/google-analytics-excluding-visits-in-development-and-production/index.html
@@ -408,6 +408,10 @@ <h1 class="entry-title">Google Analytics - Excluding Your Own Visits in Developm
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/">Creating a Polished Vertical Tabs Interaction with jQuery UI</a>
</li>
@@ -443,10 +447,6 @@ <h1 class="entry-title">Google Analytics - Excluding Your Own Visits in Developm
<a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
</li>
- <li class="post">
- <a href="/2012/08/19/onscroll-event-issues-on-mobile-browsers/">onscroll Event Issues on Mobile Browsers</a>
- </li>
-
</ul>
</section>
View
8 2012/08/30/html5-form-validation-start-using-it-in-production-applications/index.html
@@ -255,6 +255,10 @@ <h1 class="entry-title">HTML5 Form Validation - Start Using it in Production App
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/">Creating a Polished Vertical Tabs Interaction with jQuery UI</a>
</li>
@@ -290,10 +294,6 @@ <h1 class="entry-title">HTML5 Form Validation - Start Using it in Production App
<a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
</li>
- <li class="post">
- <a href="/2012/08/19/onscroll-event-issues-on-mobile-browsers/">onscroll Event Issues on Mobile Browsers</a>
- </li>
-
</ul>
</section>
View
8 2012/09/14/using-jquery-ui-slider-to-polyfill-html5-input-type-range/index.html
@@ -282,6 +282,10 @@ <h1 class="entry-title">Using jQuery UI's Slider to Polyfill HTML5's input[type=
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/">Creating a Polished Vertical Tabs Interaction with jQuery UI</a>
</li>
@@ -317,10 +321,6 @@ <h1 class="entry-title">Using jQuery UI's Slider to Polyfill HTML5's input[type=
<a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
</li>
- <li class="post">
- <a href="/2012/08/19/onscroll-event-issues-on-mobile-browsers/">onscroll Event Issues on Mobile Browsers</a>
- </li>
-
</ul>
</section>
View
8 2012/09/19/using-the-attribute-selector-with-numeric-values/index.html
@@ -273,6 +273,10 @@ <h1 class="entry-title">Using the Attribute Selector with Numeric Values</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/">Creating a Polished Vertical Tabs Interaction with jQuery UI</a>
</li>
@@ -308,10 +312,6 @@ <h1 class="entry-title">Using the Attribute Selector with Numeric Values</h1>
<a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
</li>
- <li class="post">
- <a href="/2012/08/19/onscroll-event-issues-on-mobile-browsers/">onscroll Event Issues on Mobile Browsers</a>
- </li>
-
</ul>
</section>
View
8 2012/10/17/maxlength-constraint-validation-oddities/index.html
@@ -243,6 +243,10 @@ <h1 class="entry-title">maxlength Constraint Validation Oddities in Major Browse
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/">Creating a Polished Vertical Tabs Interaction with jQuery UI</a>
</li>
@@ -278,10 +282,6 @@ <h1 class="entry-title">maxlength Constraint Validation Oddities in Major Browse
<a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
</li>
- <li class="post">
- <a href="/2012/08/19/onscroll-event-issues-on-mobile-browsers/">onscroll Event Issues on Mobile Browsers</a>
- </li>
-
</ul>
</section>
View
8 2012/10/23/front-end-efficiency-the-top-ten/index.html
@@ -196,6 +196,10 @@ <h1 class="entry-title">Front End Efficiency - The Top Ten</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/">Creating a Polished Vertical Tabs Interaction with jQuery UI</a>
</li>
@@ -231,10 +235,6 @@ <h1 class="entry-title">Front End Efficiency - The Top Ten</h1>
<a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
</li>
- <li class="post">
- <a href="/2012/08/19/onscroll-event-issues-on-mobile-browsers/">onscroll Event Issues on Mobile Browsers</a>
- </li>
-
</ul>
</section>
View
8 2012/10/24/adding-pointers-to-jquery-ui-tooltips/index.html
@@ -213,6 +213,10 @@ <h1 class="entry-title">Adding Pointers to jQuery UI Tooltips</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/">Creating a Polished Vertical Tabs Interaction with jQuery UI</a>
</li>
@@ -248,10 +252,6 @@ <h1 class="entry-title">Adding Pointers to jQuery UI Tooltips</h1>
<a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
</li>
- <li class="post">
- <a href="/2012/08/19/onscroll-event-issues-on-mobile-browsers/">onscroll Event Issues on Mobile Browsers</a>
- </li>
-
</ul>
</section>
View
10 2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/index.html
@@ -185,6 +185,8 @@ <h1 class="entry-title">Creating a Polished Vertical Tabs Interaction with jQuer
<a class="basic-alignment left" href="/2012/10/24/adding-pointers-to-jquery-ui-tooltips/" title="Previous Post: Adding Pointers to jQuery UI Tooltips">&laquo; Adding Pointers to jQuery UI Tooltips</a>
+ <a class="basic-alignment right" href="/2012/11/10/creating-cross-browser-scrollable-tbody/" title="Next Post: Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach &raquo;</a>
+
</p>
</footer>
</article>
@@ -204,6 +206,10 @@ <h1 class="entry-title">Creating a Polished Vertical Tabs Interaction with jQuer
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/">Creating a Polished Vertical Tabs Interaction with jQuery UI</a>
</li>
@@ -239,10 +245,6 @@ <h1 class="entry-title">Creating a Polished Vertical Tabs Interaction with jQuer
<a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
</li>
- <li class="post">
- <a href="/2012/08/19/onscroll-event-issues-on-mobile-browsers/">onscroll Event Issues on Mobile Browsers</a>
- </li>
-
</ul>
</section>
View
405 2012/11/10/creating-cross-browser-scrollable-tbody/index.html
@@ -0,0 +1,405 @@
+
+<!DOCTYPE html>
+<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
+<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
+<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
+<head>
+ <meta charset="utf-8">
+ <title>Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach - TJ VanToll - Tutorials, Thoughts, and Ramblings on Front End Development</title>
+ <meta name="author" content="TJ VanToll">
+
+
+ <meta name="description" content="By default the overflow CSS property does not apply to table group elements (&lt;thead&gt;, &lt;tbody&gt;, or &lt;tfoot&gt;). As of Firefox 4 this &hellip;">
+
+
+ <!-- http://t.co/dKP3o1e -->
+ <meta name="HandheldFriendly" content="True">
+ <meta name="MobileOptimized" content="320">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+
+ <link rel="canonical" href="http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody">
+ <!-- Use custom favicon -->
+ <!--<link href="/favicon.png" rel="icon">-->
+ <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
+
+
+ <!--Custom script concatenation
+ <script src="/javascripts/modernizr-2.5.3.js"></script>
+
+ <script src="/javascripts/ender.js"></script>
+ <script src="/javascripts/octopress.js"></script>
+ <script src="/javascripts/PictureCube.js"></script>
+ <script src="/javascripts/ender.tipsy.js"></script>
+ <script src="/javascripts/blog.js"></script>
+ -->
+ <script src="/javascripts/build/scripts.js"></script>
+
+ <link href="/atom.xml" rel="alternate" title="TJ VanToll" type="application/atom+xml">
+ <style>
+ /* Fonts from Google"s Web font directory at http://google.com/webfonts */
+ @import url(http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic);
+ @import url(http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic);
+</style>
+
+
+ <script type="text/javascript">
+ if (window.location.host.indexOf('local') == -1) {
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-29179796-1']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+ }
+ </script>
+
+
+</head>
+
+<body >
+ <header role="banner"><hgroup>
+ <div id="picture-cube"></div>
+ <h1><a href="/">TJ VanToll</a></h1>
+
+ <h2>Tutorials, Thoughts, and Ramblings on Front End Development</h2>
+
+</hgroup>
+
+</header>
+ <nav role="navigation"><ul class="subscription" data-subscription="rss">
+ <li><a href="/atom.xml" rel="subscribe-rss" title="subscribe via RSS">RSS</a></li>
+
+</ul>
+
+<form action="http://google.com/search" method="get">
+ <fieldset role="search">
+ <input type="hidden" name="q" value="site:tjvantoll.com" />
+ <input class="search" type="text" name="q" results="0" placeholder="Search"/>
+ </fieldset>
+</form>
+
+<ul class="main-navigation">
+ <li><a href="/blog">Blog</a></li>
+ <li><a href="/">About</a></li>
+ <li><a href="/blog/archives">Archives</a></li>
+ <li><a href="/speaking">Speaking</a></li>
+</ul>
+
+</nav>
+ <div id="main">
+ <div id="content">
+ <div>
+<article class="hentry" role="article">
+
+ <header>
+
+ <h1 class="entry-title">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</h1>
+
+
+ <p class="meta">
+
+
+
+
+
+
+
+
+
+
+
+
+<time datetime="2012-11-10T15:44:00-05:00" pubdate data-updated="true">Nov 10<span>th</span>, 2012</time>
+
+ | <a href="#disqus_thread">Comments</a>
+
+ </p>
+
+ </header>
+
+
+<div class="entry-content"><p>By default the <code>overflow</code> CSS property does not apply to table group elements (<code>&lt;thead&gt;</code>, <code>&lt;tbody&gt;</code>, or <code>&lt;tfoot&gt;</code>). <a href="https://developer.mozilla.org/en-US/docs/Firefox_4_for_developers#Miscellaneous_CSS_changes">As of Firefox 4</a> this behavior is consistent across all browser implementations.</p>
+
+<p>Therefore, if you attempt to apply a CSS <code>height</code> and <code>overflow: scroll</code> to a <code>&lt;tbody&gt;</code> it will have no effect in modern browsers. You can see this for yourself <a href="http://jsfiddle.net/tj_vantoll/vU494/">here</a>.</p>
+
+<p>But having a scrolling table body with fixed headers is a useful UI element, so how do you work around this?</p>
+
+<!--more-->
+
+
+<h3>The Solution</h3>
+
+<p>Here is my solution:</p>
+
+<pre class="codepen" data-height="400" data-type="result" data-href="JEKIu" data-user="tjvantoll"><code></code></pre>
+
+
+<script async src="http://codepen.io:/assets/embed/ei.js"></script>
+
+
+<h3>How does it work?</h3>
+
+<p>The first step is to set the <code>&lt;tbody&gt;</code> to <code>display: block</code> so an <code>overflow</code> and <code>height</code> can be applied. From there the rows in the <code>&lt;thead&gt;</code> need to be set to <code>position: relative</code> and <code>display: block</code> so that they&#8217;ll sit on top of the now scrollable <code>&lt;tbody&gt;</code>.</p>
+
+<p>That&#8217;s really about it.</p>
+
+<h3>Unfortunate Part #1: Old Internet Explorer</h3>
+
+<p>When you set a <code>height</code> on a <code>&lt;tbody&gt;</code> Internet Explorer &lt; 10 applies that <code>height</code> to every table cell, which is of course wonderful.</p>
+
+<p>My workaround for this is to conditionally create a wrapper <code>&lt;div&gt;</code>. When it&#8217;s present I give it the <code>height</code> and <code>overflow</code> and remove the <code>height</code> from the <code>&lt;tbody&gt;</code>.</p>
+
+<figure class='code'><figcaption class='not_empty'><span>Wrap table for IE</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
+<span class='line-number'>2</span>
+<span class='line-number'>3</span>
+<span class='line-number'>4</span>
+<span class='line-number'>5</span>
+<span class='line-number'>6</span>
+<span class='line-number'>7</span>
+<span class='line-number'>8</span>
+<span class='line-number'>9</span>
+<span class='line-number'>10</span>
+<span class='line-number'>11</span>
+<span class='line-number'>12</span>
+<span class='line-number'>13</span>
+</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;style&gt;</span>
+</span><span class='line'> <span class="nc">.old_ie_wrapper</span> <span class="p">{</span> <span class="k">height</span><span class="o">:</span> <span class="m">300px</span><span class="p">;</span> <span class="k">overflow</span><span class="o">:</span> <span class="k">auto</span><span class="p">;</span> <span class="p">}</span>
+</span><span class='line'> <span class="nc">.old_ie_wrapper</span> <span class="nt">tbody</span> <span class="p">{</span> <span class="k">height</span><span class="o">:</span> <span class="k">auto</span><span class="p">;</span> <span class="p">}</span>
+</span><span class='line'><span class="nt">&lt;/style&gt;</span>
+</span><span class='line'><span class="c">&lt;!--[if lte IE 9]&gt;</span>
+</span><span class='line'><span class="c">&lt;div class=&quot;old_ie_wrapper&quot;&gt;</span>
+</span><span class='line'><span class="c">&lt;!--&lt;![endif]--&gt;</span>
+</span><span class='line'> <span class="nt">&lt;table&gt;</span>
+</span><span class='line'> <span class="c">&lt;!-- Contents of the table --&gt;</span>
+</span><span class='line'> <span class="nt">&lt;/table&gt;</span>
+</span><span class='line'><span class="c">&lt;!--[if lte IE 9]&gt;</span>
+</span><span class='line'><span class="c">&lt;/div&gt;</span>
+</span><span class='line'><span class="c">&lt;!--&lt;![endif]--&gt;</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>The headers will scroll with the table body, but the table will at least be usable. You could also create <a href="http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/">conditional classes on the &lt;html&gt; tag</a> to handle this as well.</p>
+
+<h3>Unfortunate Part #2: Widths</h3>
+
+<p>Because the <code>&lt;thead&gt;</code> is relatively positioned each table cell needs an explicit <code>width</code>.</p>
+
+<figure class='code'><figcaption class='empty'><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
+<span class='line-number'>2</span>
+<span class='line-number'>3</span>
+</pre></td><td class='code'><pre><code class='css'><span class='line'><span class="nt">td</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">1</span><span class="o">),</span> <span class="nt">th</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">1</span><span class="o">)</span> <span class="p">{</span> <span class="k">width</span><span class="o">:</span> <span class="m">100px</span><span class="p">;</span> <span class="p">}</span>
+</span><span class='line'><span class="nt">td</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">2</span><span class="o">),</span> <span class="nt">th</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">2</span><span class="o">)</span> <span class="p">{</span> <span class="k">width</span><span class="o">:</span> <span class="m">100px</span><span class="p">;</span> <span class="p">}</span>
+</span><span class='line'><span class="nt">td</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">3</span><span class="o">),</span> <span class="nt">th</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">3</span><span class="o">)</span> <span class="p">{</span> <span class="k">width</span><span class="o">:</span> <span class="m">100px</span><span class="p">;</span> <span class="p">}</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>But unfortunately that is not enough. When a scrollbar is present browsers allocate space for it, therefore, the <code>&lt;tbody&gt;</code> ends up having less space available than the <code>&lt;thead&gt;</code>. Notice the slight misalignment this creates:</p>
+
+<p><img src="/images/posts/2012-11-10/Alignment-Issue.png" title="Alignment issue with scroll bar" alt="Alignment issue with scroll bar" /></p>
+
+<p>The only workaround I could come up with was to set a <code>min-width</code> on all columns except the last one.</p>
+
+<figure class='code'><figcaption class='empty'><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
+<span class='line-number'>2</span>
+<span class='line-number'>3</span>
+</pre></td><td class='code'><pre><code class='css'><span class='line'><span class="nt">td</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">1</span><span class="o">),</span> <span class="nt">th</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">1</span><span class="o">)</span> <span class="p">{</span> <span class="k">min-width</span><span class="o">:</span> <span class="m">100px</span><span class="p">;</span> <span class="p">}</span>
+</span><span class='line'><span class="nt">td</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">2</span><span class="o">),</span> <span class="nt">th</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">2</span><span class="o">)</span> <span class="p">{</span> <span class="k">min-width</span><span class="o">:</span> <span class="m">100px</span><span class="p">;</span> <span class="p">}</span>
+</span><span class='line'><span class="nt">td</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">3</span><span class="o">),</span> <span class="nt">th</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">3</span><span class="o">)</span> <span class="p">{</span> <span class="k">width</span><span class="o">:</span> <span class="m">100px</span><span class="p">;</span> <span class="p">}</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<h3>The Good</h3>
+
+<p>Despite these issues the solution does work in all browsers back to IE6 with no JavaScript dependency.</p>
+
+<p>The markup to create the table is simple and semantic. I&#8217;ve seen workarounds for this issue that use <code>&lt;div&gt;</code>s instead of <code>&lt;table&gt;</code>s or multiple aligned <code>&lt;table&gt;</code>s and those always felt dirty to me.</p>
+
+<p>The code is free to use and do whatever you want with it. If you have any suggestions for improvements or find any issues please let me know in the comments.</p>
+</div>
+
+
+ <footer>
+ <p class="meta">
+
+
+
+<span class="byline author vcard">Posted by <span class="fn">TJ VanToll</span></span>
+
+
+
+
+
+
+
+
+
+
+
+
+
+<time datetime="2012-11-10T15:44:00-05:00" pubdate data-updated="true">Nov 10<span>th</span>, 2012</time>
+
+
+<span class="categories">
+
+ <a class='category' href='/blog/categories/browsers/'>Browsers</a>, <a class='category' href='/blog/categories/css/'>CSS</a>, <a class='category' href='/blog/categories/html/'>HTML</a>
+
+</span>
+
+
+ </p>
+ <p class="author_card meta">
+ <img src="/images/me/1.jpg" alt="Me!" id="post_me" />
+ TJ VanToll is an avid web developer working for <a href="http://liquidweb.com">Liquid Web</a> and living in Lansing, MI. He is an open source advocate who publishes this blog <a href="https://github.com/tjvantoll/tjvantoll.github.com/tree/source">open source</a> and contributes to <a href="http://jqueryui.com">jQuery UI</a>. When not on the internet he is generally found <a href="/images/kids/2.jpg">brainwashing his children</a>, debating CSS with his girlfriend, or talking about himself in the third person. If you like hearing TJ talk about himself you should consider <a href="http://twitter.com/tjvantoll">following him on Twitter</a>.
+ </p>
+
+ <div class="sharing">
+
+ <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/" data-via="tjvantoll" data-counturl="http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/" >Tweet</a>
+
+
+
+</div>
+
+
+ <p class="meta">
+
+ <a class="basic-alignment left" href="/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/" title="Previous Post: Creating a Polished Vertical Tabs Interaction with jQuery UI">&laquo; Creating a Polished Vertical Tabs Interaction with jQuery UI</a>
+
+
+ </p>
+ </footer>
+</article>
+
+ <section>
+ <h1>Comments</h1>
+ <div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+</div>
+ </section>
+
+</div>
+
+<aside class="sidebar">
+
+ <section>
+ <h1>Recent Posts</h1>
+ <ul id="recent_posts">
+
+ <li class="post">
+ <a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
+ </li>
+
+ <li class="post">
+ <a href="/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/">Creating a Polished Vertical Tabs Interaction with jQuery UI</a>
+ </li>
+
+ <li class="post">
+ <a href="/2012/10/24/adding-pointers-to-jquery-ui-tooltips/">Adding Pointers to jQuery UI Tooltips</a>
+ </li>
+
+ <li class="post">
+ <a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
+ </li>
+
+ <li class="post">
+ <a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
+ </li>
+
+ <li class="post">
+ <a href="/2012/09/19/using-the-attribute-selector-with-numeric-values/">Using the Attribute Selector with Numeric Values</a>
+ </li>
+
+ <li class="post">
+ <a href="/2012/09/14/using-jquery-ui-slider-to-polyfill-html5-input-type-range/">Using jQuery UI's Slider to Polyfill HTML5's input[type=range]</a>
+ </li>
+
+ <li class="post">
+ <a href="/2012/08/30/html5-form-validation-start-using-it-in-production-applications/">HTML5 Form Validation - Start Using it in Production Applications</a>
+ </li>
+
+ <li class="post">
+ <a href="/2012/08/28/google-analytics-excluding-visits-in-development-and-production/">Google Analytics - Excluding Your Own Visits in Development and Production</a>
+ </li>
+
+ <li class="post">
+ <a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
+ </li>
+
+ </ul>
+</section>
+
+<section>
+ <h1>Latest Tweets</h1>
+ <ul id="tweets">
+ <li class="loading">Status updating...</li>
+ </ul>
+ <script type="text/javascript">
+ $.domReady(function(){
+ getTwitterFeed("tjvantoll", 4, false);
+ });
+ </script>
+ <script src="/javascripts/twitter.js" type="text/javascript"> </script>
+
+ <a href="http://twitter.com/tjvantoll" class="twitter-follow-button" data-show-count="false">Follow @tjvantoll</a>
+
+</section>
+
+<section class="jsdocs">
+ <h1><a href="http://promotejs.com">Promote JS!</a></h1>
+ <a href="https://developer.mozilla.org/en/JavaScript/Guide" title="JS Tutorial, JavaScript Tutorial, JavaScript Guide, Learn JavaScript JS, How To Learn JS, Learning JavaScript"><img src="http://static.jsconf.us/promotejshs.png" height="150" alt="JS Tutorial, JavaScript Tutorial, JavaScript Guide, Learn JavaScript JS, How To Learn JS, Learning JavaScript" width="180"></a></section>
+
+</aside>
+
+
+ </div>
+ </div>
+ <footer role="contentinfo"><p>
+ Copyright &copy; 2012 - <a href="/">TJ VanToll</a> -
+ <span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
+</p>
+
+</footer>
+
+
+<script type="text/javascript">
+ var disqus_shortname = 'tjvantoll';
+
+
+ // var disqus_developer = 1;
+ var disqus_identifier = 'http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/';
+ var disqus_url = 'http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/';
+ var disqus_script = 'embed.js';
+
+ (function () {
+ var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+ dsq.src = 'http://' + disqus_shortname + '.disqus.com/' + disqus_script;
+ (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+ }());
+</script>
+
+
+
+
+
+
+
+ <script type="text/javascript">
+ (function(){
+ var twitterWidgets = document.createElement('script');
+ twitterWidgets.type = 'text/javascript';
+ twitterWidgets.async = true;
+ twitterWidgets.src = 'http://platform.twitter.com/widgets.js';
+ document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
+ })();
+ </script>
+
+
+
+
+
+</body>
+</html>
View
331 atom.xml
@@ -4,7 +4,7 @@
<title><![CDATA[TJ VanToll]]></title>
<link href="http://tjvantoll.com/atom.xml" rel="self"/>
<link href="http://tjvantoll.com/"/>
- <updated>2012-11-09T22:36:40-05:00</updated>
+ <updated>2012-11-10T17:45:05-05:00</updated>
<id>http://tjvantoll.com/</id>
<author>
<name><![CDATA[TJ VanToll]]></name>
@@ -14,6 +14,111 @@
<entry>
+ <title type="html"><![CDATA[Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach]]></title>
+ <link href="http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/"/>
+ <updated>2012-11-10T15:44:00-05:00</updated>
+ <id>http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody</id>
+ <content type="html"><![CDATA[<p>By default the <code>overflow</code> CSS property does not apply to table group elements (<code>&lt;thead&gt;</code>, <code>&lt;tbody&gt;</code>, or <code>&lt;tfoot&gt;</code>). <a href="https://developer.mozilla.org/en-US/docs/Firefox_4_for_developers#Miscellaneous_CSS_changes">As of Firefox 4</a> this behavior is consistent across all browser implementations.</p>
+
+<p>Therefore, if you attempt to apply a CSS <code>height</code> and <code>overflow: scroll</code> to a <code>&lt;tbody&gt;</code> it will have no effect in modern browsers. You can see this for yourself <a href="http://jsfiddle.net/tj_vantoll/vU494/">here</a>.</p>
+
+<p>But having a scrolling table body with fixed headers is a useful UI element, so how do you work around this?</p>
+
+<!--more-->
+
+
+<h3>The Solution</h3>
+
+<p>Here is my solution:</p>
+
+<pre class="codepen" data-height="400" data-type="result" data-href="JEKIu" data-user="tjvantoll"><code></code></pre>
+
+
+<script async src="http://codepen.io:/assets/embed/ei.js"></script>
+
+
+<h3>How does it work?</h3>
+
+<p>The first step is to set the <code>&lt;tbody&gt;</code> to <code>display: block</code> so an <code>overflow</code> and <code>height</code> can be applied. From there the rows in the <code>&lt;thead&gt;</code> need to be set to <code>position: relative</code> and <code>display: block</code> so that they&#8217;ll sit on top of the now scrollable <code>&lt;tbody&gt;</code>.</p>
+
+<p>That&#8217;s really about it.</p>
+
+<h3>Unfortunate Part #1: Old Internet Explorer</h3>
+
+<p>When you set a <code>height</code> on a <code>&lt;tbody&gt;</code> Internet Explorer &lt; 10 applies that <code>height</code> to every table cell, which is of course wonderful.</p>
+
+<p>My workaround for this is to conditionally create a wrapper <code>&lt;div&gt;</code>. When it&#8217;s present I give it the <code>height</code> and <code>overflow</code> and remove the <code>height</code> from the <code>&lt;tbody&gt;</code>.</p>
+
+<figure class='code'><figcaption class='not_empty'><span>Wrap table for IE</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
+<span class='line-number'>2</span>
+<span class='line-number'>3</span>
+<span class='line-number'>4</span>
+<span class='line-number'>5</span>
+<span class='line-number'>6</span>
+<span class='line-number'>7</span>
+<span class='line-number'>8</span>
+<span class='line-number'>9</span>
+<span class='line-number'>10</span>
+<span class='line-number'>11</span>
+<span class='line-number'>12</span>
+<span class='line-number'>13</span>
+</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;style&gt;</span>
+</span><span class='line'> <span class="nc">.old_ie_wrapper</span> <span class="p">{</span> <span class="k">height</span><span class="o">:</span> <span class="m">300px</span><span class="p">;</span> <span class="k">overflow</span><span class="o">:</span> <span class="k">auto</span><span class="p">;</span> <span class="p">}</span>
+</span><span class='line'> <span class="nc">.old_ie_wrapper</span> <span class="nt">tbody</span> <span class="p">{</span> <span class="k">height</span><span class="o">:</span> <span class="k">auto</span><span class="p">;</span> <span class="p">}</span>
+</span><span class='line'><span class="nt">&lt;/style&gt;</span>
+</span><span class='line'><span class="c">&lt;!--[if lte IE 9]&gt;</span>
+</span><span class='line'><span class="c">&lt;div class=&quot;old_ie_wrapper&quot;&gt;</span>
+</span><span class='line'><span class="c">&lt;!--&lt;![endif]--&gt;</span>
+</span><span class='line'> <span class="nt">&lt;table&gt;</span>
+</span><span class='line'> <span class="c">&lt;!-- Contents of the table --&gt;</span>
+</span><span class='line'> <span class="nt">&lt;/table&gt;</span>
+</span><span class='line'><span class="c">&lt;!--[if lte IE 9]&gt;</span>
+</span><span class='line'><span class="c">&lt;/div&gt;</span>
+</span><span class='line'><span class="c">&lt;!--&lt;![endif]--&gt;</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>The headers will scroll with the table body, but the table will at least be usable. You could also create <a href="http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/">conditional classes on the &lt;html&gt; tag</a> to handle this as well.</p>
+
+<h3>Unfortunate Part #2: Widths</h3>
+
+<p>Because the <code>&lt;thead&gt;</code> is relatively positioned each table cell needs an explicit <code>width</code>.</p>
+
+<figure class='code'><figcaption class='empty'><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
+<span class='line-number'>2</span>
+<span class='line-number'>3</span>
+</pre></td><td class='code'><pre><code class='css'><span class='line'><span class="nt">td</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">1</span><span class="o">),</span> <span class="nt">th</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">1</span><span class="o">)</span> <span class="p">{</span> <span class="k">width</span><span class="o">:</span> <span class="m">100px</span><span class="p">;</span> <span class="p">}</span>
+</span><span class='line'><span class="nt">td</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">2</span><span class="o">),</span> <span class="nt">th</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">2</span><span class="o">)</span> <span class="p">{</span> <span class="k">width</span><span class="o">:</span> <span class="m">100px</span><span class="p">;</span> <span class="p">}</span>
+</span><span class='line'><span class="nt">td</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">3</span><span class="o">),</span> <span class="nt">th</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">3</span><span class="o">)</span> <span class="p">{</span> <span class="k">width</span><span class="o">:</span> <span class="m">100px</span><span class="p">;</span> <span class="p">}</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>But unfortunately that is not enough. When a scrollbar is present browsers allocate space for it, therefore, the <code>&lt;tbody&gt;</code> ends up having less space available than the <code>&lt;thead&gt;</code>. Notice the slight misalignment this creates:</p>
+
+<p><img src="http://tjvantoll.com/images/posts/2012-11-10/Alignment-Issue.png" title="Alignment issue with scroll bar" alt="Alignment issue with scroll bar" /></p>
+
+<p>The only workaround I could come up with was to set a <code>min-width</code> on all columns except the last one.</p>
+
+<figure class='code'><figcaption class='empty'><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
+<span class='line-number'>2</span>
+<span class='line-number'>3</span>
+</pre></td><td class='code'><pre><code class='css'><span class='line'><span class="nt">td</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">1</span><span class="o">),</span> <span class="nt">th</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">1</span><span class="o">)</span> <span class="p">{</span> <span class="k">min-width</span><span class="o">:</span> <span class="m">100px</span><span class="p">;</span> <span class="p">}</span>
+</span><span class='line'><span class="nt">td</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">2</span><span class="o">),</span> <span class="nt">th</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">2</span><span class="o">)</span> <span class="p">{</span> <span class="k">min-width</span><span class="o">:</span> <span class="m">100px</span><span class="p">;</span> <span class="p">}</span>
+</span><span class='line'><span class="nt">td</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">3</span><span class="o">),</span> <span class="nt">th</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">3</span><span class="o">)</span> <span class="p">{</span> <span class="k">width</span><span class="o">:</span> <span class="m">100px</span><span class="p">;</span> <span class="p">}</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<h3>The Good</h3>
+
+<p>Despite these issues the solution does work in all browsers back to IE6 with no JavaScript dependency.</p>
+
+<p>The markup to create the table is simple and semantic. I&#8217;ve seen workarounds for this issue that use <code>&lt;div&gt;</code>s instead of <code>&lt;table&gt;</code>s or multiple aligned <code>&lt;table&gt;</code>s and those always felt dirty to me.</p>
+
+<p>The code is free to use and do whatever you want with it. If you have any suggestions for improvements or find any issues please let me know in the comments.</p>
+]]></content>
+ </entry>
+
+ <entry>
<title type="html"><![CDATA[Creating a Polished Vertical Tabs Interaction with jQuery UI]]></title>
<link href="http://tjvantoll.com/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/"/>
<updated>2012-11-08T00:00:00-05:00</updated>
@@ -3042,228 +3147,4 @@
]]></content>
</entry>
- <entry>
- <title type="html"><![CDATA[Browser CSS Parsing Discrepancies]]></title>
- <link href="http://tjvantoll.com/2012/06/10/browser-css-parsing-discrepancies/"/>
- <updated>2012-06-10T22:24:00-04:00</updated>
- <id>http://tjvantoll.com/2012/06/10/browser-css-parsing-discrepancies</id>
- <content type="html"><![CDATA[<p>Possibly the most frustrating thing that can happen during web development is when things look or behave differently in different browsers for no apparent reason.</p>
-
-<p>One of the major features of HTML5 is a <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html">parsing algorithm</a> that specifies not only how to handle well formed markup, but also what to do with invalid HTML.</p>
-
-<p>The <a href="http://www.w3.org/TR/CSS2/syndata.html#parsing-errors">CSS specification</a> actually does the same. In fact, it goes into explicit detail for how to handle a wide variety of nonsense syntax that it might encounter. For example&#8230;</p>
-
-<!--more-->
-
-
-<p><strong>Declarations with unkown properties should be ignored.</strong></p>
-
-<figure class='code'><figcaption class='empty'><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
-<span class='line-number'>2</span>
-<span class='line-number'>3</span>
-<span class='line-number'>4</span>
-</pre></td><td class='code'><pre><code class='css'><span class='line'><span class="nt">h1</span> <span class="p">{</span> <span class="k">color</span><span class="o">:</span> <span class="nb">red</span><span class="p">;</span> <span class="n">foo</span><span class="o">:</span> <span class="n">bar</span><span class="p">;</span> <span class="p">}</span>
-</span><span class='line'>
-</span><span class='line'><span class="c">/* foo is an unkown property so the browser should interpret this as... */</span>
-</span><span class='line'><span class="nt">h1</span> <span class="p">{</span> <span class="k">color</span><span class="o">:</span> <span class="nb">red</span><span class="p">;</span> <span class="p">}</span>
-</span></code></pre></td></tr></table></div></figure>
-
-
-<p><strong>Illegal values should be ignored.</strong></p>
-
-<figure class='code'><figcaption class='empty'><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
-<span class='line-number'>2</span>
-<span class='line-number'>3</span>
-</pre></td><td class='code'><pre><code class='css'><span class='line'><span class="nt">h1</span> <span class="p">{</span> <span class="k">float</span><span class="o">:</span> <span class="s1">&#39;foo&#39;</span><span class="p">;</span> <span class="p">}</span>
-</span><span class='line'>
-</span><span class='line'><span class="c">/* foo is an invalid value for the float property and should be ignored */</span>
-</span></code></pre></td></tr></table></div></figure>
-
-
-<p>These are just a sampling of what is specified. The above rules are well documented and consistenly followed by all browsers. Unfortunately that is not the case as we get into more complicated scenarios.</p>
-
-<h3>Malformed Strings in CSS</h3>
-
-<p>Take a guess, what <em>should</em> happen with the following:</p>
-
-<figure class='code'><figcaption class='empty'><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
-<span class='line-number'>2</span>
-<span class='line-number'>3</span>
-<span class='line-number'>4</span>
-<span class='line-number'>5</span>
-<span class='line-number'>6</span>
-<span class='line-number'>7</span>
-<span class='line-number'>8</span>
-<span class='line-number'>9</span>
-<span class='line-number'>10</span>
-</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;div</span> <span class="na">data-number=</span><span class="s">&quot;one&quot;</span><span class="nt">&gt;</span>one<span class="nt">&lt;/div&gt;</span>
-</span><span class='line'><span class="nt">&lt;div</span> <span class="na">data-number=</span><span class="s">&quot;two&quot;</span><span class="nt">&gt;</span>two<span class="nt">&lt;/div&gt;</span>​
-</span><span class='line'>
-</span><span class='line'><span class="nt">&lt;style&gt;</span>
-</span><span class='line'> <span class="nt">div</span> <span class="p">{</span> <span class="k">color</span><span class="o">:</span> <span class="nb">black</span><span class="p">;</span> <span class="p">}</span>
-</span><span class='line'> <span class="c">/*Notice the missing double quote after the URL.*/</span>
-</span><span class='line'> <span class="o">[</span><span class="nt">data-number</span><span class="o">=</span><span class="s1">&#39;one&#39;</span><span class="o">]</span> <span class="p">{</span> <span class="k">background</span><span class="o">:</span> <span class="sx">url(&quot;some-url)</span><span class="p">;</span> <span class="k">color</span><span class="o">:</span> <span class="nb">red</span><span class="p">;</span> <span class="p">}</span>
-</span><span class='line'> <span class="o">[</span><span class="nt">data-number</span><span class="o">=</span><span class="s1">&#39;two&#39;</span><span class="o">]</span> <span class="p">{</span> <span class="k">color</span><span class="o">:</span> <span class="nb">blue</span><span class="p">;</span> <span class="p">}</span>
-</span><span class='line'> <span class="nt">div</span> <span class="p">{</span> <span class="k">border</span><span class="o">:</span> <span class="m">2px</span> <span class="k">solid</span> <span class="nb">black</span><span class="p">;</span> <span class="p">}</span><span class="err">​</span>
-</span><span class='line'><span class="nt">&lt;/style&gt;</span>
-</span></code></pre></td></tr></table></div></figure>
-
-
-<p>The relevant portion of the specification states that&#8230;</p>
-
-<blockquote><p>User agents must close strings upon reaching the end of a line (i.e., before an unescaped line feed, carriage return or form feed character), but then drop the construct (declaration or rule) in which the string was found.</p><footer><strong>CSS Specification</strong> <cite><a href='http://www.w3.org/TR/CSS2/syndata.html#parsing-errors'>www.w3.org/TR/CSS2/&hellip;</a></cite></footer></blockquote>
-
-
-<p>Let&#8217;s take this one rule at a time.</p>
-
-<pre><code>background: url("some-url);
-</code></pre>
-
-<p>Per the spec you would expect the <code>background</code> to be ignored because of the malformed string, and it is in all browsers I tested.</p>
-
-<pre><code>color: red;
-</code></pre>
-
-<p>This is kind of in a gray area. The spec says that the <em>construct in which the unclosed string was found</em> should be dropped, which makes it seem like this rule shouldn&#8217;t be interpreted. But what about subsequent rules that were encountered before a new line? It seems like the browser could be smart enough to apply this rule.</p>
-
-<pre><code>color: blue;
-</code></pre>
-
-<p>Per the spec you would expect this to be interpreted since a new line character occurred between the unclosed quote and this rule.</p>
-
-<pre><code>border: 2px solid black;
-</code></pre>
-
-<p>Along the same lines you would also expect a border to be around both divs since by then normal parsing of the stylesheet should resume.</p>
-
-<p>Here&#8217;s what a sampling of browsers actually do.</p>
-
-<table>
- <thead>
- <tr>
- <th>Browser</th>
- <th>Div one color</th>
- <th>Div two color</th>
- <th>Border around the divs</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Chrome 19</td>
- <td class="red">Red</td>
- <td class="blue">Blue</td>
- <td>Yes</td>
- </tr>
- <tr>
- <td>Safari 5.1.7</td>
- <td class="red">Red</td>
- <td class="blue">Blue</td>
- <td>Yes</td>
- </tr>
- <tr>
- <td>Firefox 12</td>
- <td>Black</td>
- <td>Black</td>
- <td>No</td>
- </tr>
- <tr>
- <td>Opera 11.62</td>
- <td>Black</td>
- <td>Black</td>
- <td>No</td>
- </tr>
- <tr>
- <td>Opera Mobile</td>
- <td>Black</td>
- <td>Black</td>
- <td>No</td>
- </tr>
- <tr>
- <td>iOS 5</td>
- <td class="red">Red</td>
- <td class="blue">Blue</td>
- <td>Yes</td>
- </tr>
- <tr>
- <td>Android 2+</td>
- <td class="red">Red</td>
- <td class="blue">Blue</td>
- <td>Yes</td>
- </tr>
- <tr>
- <td>Internet Explorer 7</td>
- <td>Black</td>
- <td>Black</td>
- <td>No</td>
- </tr>
- <tr>
- <td>Internet Explorer 8</td>
- <td>Black</td>
- <td>Black</td>
- <td>No</td>
- </tr>
- <tr>
- <td>Internet Explorer 9</td>
- <td>Black</td>
- <td>Black</td>
- <td>No</td>
- </tr>
- <tr>
- <td>Internet Explorer 10</td>
- <td>Black</td>
- <td>Black</td>
- <td>No</td>
- </tr>
- </tbody>
-</table>
-
-
-<p>You can see what your browser does here.</p>
-
-<iframe style="width: 100%; height: 120px;" src="http://jsfiddle.net/tj_vantoll/PHKLz/3/embedded/result,html,css/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
-
-
-<h3>Results</h3>
-
-<p>WebKit based browsers are evaluating all rules after a semicolon is encountered and all other browsers stop in their tracks and don&#8217;t evaluate any other rules. The same results occur with some other common fat finger situations.</p>
-
-<figure class='code'><figcaption class='empty'><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
-<span class='line-number'>2</span>
-<span class='line-number'>3</span>
-<span class='line-number'>4</span>
-<span class='line-number'>5</span>
-<span class='line-number'>6</span>
-<span class='line-number'>7</span>
-<span class='line-number'>8</span>
-<span class='line-number'>9</span>
-</pre></td><td class='code'><pre><code class='css'><span class='line'><span class="c">/* Notice the mix of single and double quote in the url property value. */</span>
-</span><span class='line'><span class="o">[</span><span class="nt">data-number</span><span class="o">=</span><span class="s1">&#39;one&#39;</span><span class="o">]</span> <span class="p">{</span> <span class="k">background</span><span class="o">:</span> <span class="sx">url(&quot;some_url&#39;)</span><span class="p">;</span> <span class="k">color</span><span class="o">:</span> <span class="nb">red</span><span class="p">;</span> <span class="p">}</span>
-</span><span class='line'><span class="o">[</span><span class="nt">data-number</span><span class="o">=</span><span class="s1">&#39;two&#39;</span><span class="o">]</span> <span class="p">{</span> <span class="k">color</span><span class="o">:</span> <span class="nb">blue</span><span class="p">;</span> <span class="p">}</span>
-</span><span class='line'><span class="c">/* In WebKit browsers the color: blue; will be evaluated, in others it will not be. */</span>
-</span><span class='line'>
-</span><span class='line'><span class="c">/* Same thing if there&#39;s an malfored selector (notice the missing single quote in the selector. */</span>
-</span><span class='line'><span class="o">[</span><span class="nt">data-number</span><span class="o">=</span><span class="nt">one</span><span class="s1">&#39;] { color: red; }</span>
-</span><span class='line'><span class="s1">[data-number=&#39;</span><span class="nt">two</span><span class="err">&#39;</span><span class="o">]</span> <span class="p">{</span> <span class="k">color</span><span class="o">:</span> <span class="nb">blue</span><span class="p">;</span> <span class="p">}</span>
-</span><span class='line'><span class="c">/* Again in Webkit color: blue; will be evaluated, in others it will not be. */</span>
-</span></code></pre></td></tr></table></div></figure>
-
-
-<h3>What Could Possibly Go Wrong?</h3>
-
-<p>Frankly, since this is an error situtation I don&#8217;t think many developers would care what the browser does with this. If the rules aren&#8217;t evaluated it becomes pretty clear there&#8217;s an issue and it becomes pretty easy to find and clean up the issue. What is important to developers is that the results are consistent. The danger here is if you make a quick fix to a CSS file, fat finger some quotes, and only test in WebKit, you could catastrophically break your styling in non-WebKit browsers.</p>
-
-<h3>Avoiding Issues</h3>
-
-<p>The obvious way to avoid running into issues is to test your code in all browsers. However, with the number of browsers and devices there are to test on that&#8217;s not always feasible, especially for trivial changes.</p>
-
-<p>Modern editors with syntax highlighting can help you find malformed strings by creating an obvious syntax highlighting problem. If yours doesn&#8217;t you might want to consider switching to one that does.</p>
-
-<p>Furthermore, tools like <a href="http://csslint.net/">CSS Lint</a> can help detect issues <a href="https://github.com/stubbornella/csslint/wiki/IDE-integration">via your editor / IDE</a> or at build time by <a href="https://github.com/stubbornella/csslint/wiki/Command-line-interface">incorporating them into a Node.js or Ant build process</a>.</p>
-
-<h3>Conclusion</h3>
-
-<p>While the CSS specification tries to standarize what to do with invalid CSS browsers still handle some situations differently. Make sure your editor or build process can help detect silly typos, and attempt to test your code in a variety of browsers, even for trivial changes.</p>
-]]></content>
- </entry>
-
</feed>
View
26 blog/archives/index.html
@@ -9,8 +9,8 @@
<meta name="author" content="TJ VanToll">
- <meta name="description" content="Blog Archive 2012 Creating a Polished Vertical Tabs Interaction with jQuery UI
-Nov 08 2012 posted in CSS, jQuery UI Adding Pointers to jQuery UI &hellip;">
+ <meta name="description" content="Blog Archive 2012 Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach
+Nov 10 2012 posted in Browsers, CSS, HTML Creating a &hellip;">
<!-- http://t.co/dKP3o1e -->
@@ -110,6 +110,20 @@ <h1 class="entry-title">Blog Archive</h1>
<article>
+<h1><a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a></h1>
+<time datetime="2012-11-10T15:44:00-05:00" pubdate><span class='month'>Nov</span> <span class='day'>10</span> <span class='year'>2012</span></time>
+
+<footer>
+ <span class="categories">posted in <a class='category' href='/blog/categories/browsers/'>Browsers</a>, <a class='category' href='/blog/categories/css/'>CSS</a>, <a class='category' href='/blog/categories/html/'>HTML</a></span>
+</footer>
+
+
+</article>
+
+
+
+<article>
+
<h1><a href="/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/">Creating a Polished Vertical Tabs Interaction with jQuery UI</a></h1>
<time datetime="2012-11-08T00:00:00-05:00" pubdate><span class='month'>Nov</span> <span class='day'>08</span> <span class='year'>2012</span></time>
@@ -484,6 +498,10 @@ <h1 class="entry-title">Blog Archive</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/">Creating a Polished Vertical Tabs Interaction with jQuery UI</a>
</li>
@@ -519,10 +537,6 @@ <h1 class="entry-title">Blog Archive</h1>
<a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
</li>
- <li class="post">
- <a href="/2012/08/19/onscroll-event-issues-on-mobile-browsers/">onscroll Event Issues on Mobile Browsers</a>
- </li>
-
</ul>
</section>
View
255 blog/categories/browsers/atom.xml
@@ -4,7 +4,7 @@
<title><![CDATA[Category: Browsers | TJ VanToll]]></title>
<link href="http://tjvantoll.com/blog/categories/browsers/atom.xml" rel="self"/>
<link href="http://tjvantoll.com/"/>
- <updated>2012-11-09T22:36:40-05:00</updated>
+ <updated>2012-11-10T17:45:05-05:00</updated>
<id>http://tjvantoll.com/</id>
<author>
<name><![CDATA[TJ VanToll]]></name>
@@ -14,6 +14,94 @@
<entry>
+ <title type="html"><![CDATA[Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach]]></title>
+ <link href="http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/"/>
+ <updated>2012-11-10T15:44:00-05:00</updated>
+ <id>http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody</id>
+ <content type="html"><![CDATA[<p>By default the <code>overflow</code> CSS property does not apply to table group elements (<code>&lt;thead&gt;</code>, <code>&lt;tbody&gt;</code>, or <code>&lt;tfoot&gt;</code>). <a href="https://developer.mozilla.org/en-US/docs/Firefox_4_for_developers#Miscellaneous_CSS_changes">As of Firefox 4</a> this behavior is consistent across all browser implementations.</p>
+
+<p>Therefore, if you attempt to apply a CSS <code>height</code> and <code>overflow: scroll</code> to a <code>&lt;tbody&gt;</code> it will have no effect in modern browsers. You can see this for yourself <a href="http://jsfiddle.net/tj_vantoll/vU494/">here</a>.</p>
+
+<p>But having a scrolling table body with fixed headers is a useful UI element, so how do you work around this?</p>
+
+<!--more-->
+
+
+<h3>The Solution</h3>
+
+<p>Here is my solution:</p>
+
+<p><pre class="codepen" data-height="400" data-type="result" data-href="JEKIu" data-user="tjvantoll"><code></code></pre>
+<script async src="http://codepen.io:/assets/embed/ei.js"></script></p>
+
+<h3>How does it work?</h3>
+
+<p>The first step is to set the <code>&lt;tbody&gt;</code> to <code>display: block</code> so an <code>overflow</code> and <code>height</code> can be applied. From there the rows in the <code>&lt;thead&gt;</code> need to be set to <code>position: relative</code> and <code>display: block</code> so that they'll sit on top of the now scrollable <code>&lt;tbody&gt;</code>.</p>
+
+<p>That's really about it.</p>
+
+<h3>Unfortunate Part #1: Old Internet Explorer</h3>
+
+<p>When you set a <code>height</code> on a <code>&lt;tbody&gt;</code> Internet Explorer &lt; 10 applies that <code>height</code> to every table cell, which is of course wonderful.</p>
+
+<p>My workaround for this is to conditionally create a wrapper <code>&lt;div&gt;</code>. When it's present I give it the <code>height</code> and <code>overflow</code> and remove the <code>height</code> from the <code>&lt;tbody&gt;</code>.</p>
+
+<p>``` html Wrap table for IE</p>
+
+
+
+<!--[if lte IE 9]>
+<div class="old_ie_wrapper">
+<!--<![endif]-->
+
+
+<pre><code>&lt;table&gt;
+ &lt;!-- Contents of the table --&gt;
+&lt;/table&gt;
+</code></pre>
+
+<!--[if lte IE 9]>
+</div>
+<!--<![endif]-->
+
+
+<p>```</p>
+
+<p>The headers will scroll with the table body, but the table will at least be usable. You could also create <a href="http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/">conditional classes on the &lt;html&gt; tag</a> to handle this as well.</p>
+
+<h3>Unfortunate Part #2: Widths</h3>
+
+<p>Because the <code>&lt;thead&gt;</code> is relatively positioned each table cell needs an explicit <code>width</code>.</p>
+
+<p><code>css
+td:nth-child(1), th:nth-child(1) { width: 100px; }
+td:nth-child(2), th:nth-child(2) { width: 100px; }
+td:nth-child(3), th:nth-child(3) { width: 100px; }
+</code></p>
+
+<p>But unfortunately that is not enough. When a scrollbar is present browsers allocate space for it, therefore, the <code>&lt;tbody&gt;</code> ends up having less space available than the <code>&lt;thead&gt;</code>. Notice the slight misalignment this creates:</p>
+
+<p><img src="/images/posts/2012-11-10/Alignment-Issue.png" title="Alignment issue with scroll bar" alt="Alignment issue with scroll bar" /></p>
+
+<p>The only workaround I could come up with was to set a <code>min-width</code> on all columns except the last one.</p>
+
+<p><code>css
+td:nth-child(1), th:nth-child(1) { min-width: 100px; }
+td:nth-child(2), th:nth-child(2) { min-width: 100px; }
+td:nth-child(3), th:nth-child(3) { width: 100px; }
+</code></p>
+
+<h3>The Good</h3>
+
+<p>Despite these issues the solution does work in all browsers back to IE6 with no JavaScript dependency.</p>
+
+<p>The markup to create the table is simple and semantic. I've seen workarounds for this issue that use <code>&lt;div&gt;</code>s instead of <code>&lt;table&gt;</code>s or multiple aligned <code>&lt;table&gt;</code>s and those always felt dirty to me.</p>
+
+<p>The code is free to use and do whatever you want with it. If you have any suggestions for improvements or find any issues please let me know in the comments.</p>
+]]></content>
+ </entry>
+
+ <entry>
<title type="html"><![CDATA[maxlength Constraint Validation Oddities in Major Browsers]]></title>
<link href="http://tjvantoll.com/2012/10/17/maxlength-constraint-validation-oddities/"/>
<updated>2012-10-17T12:48:00-04:00</updated>
@@ -352,169 +440,4 @@ event.preventDefault();
]]></content>
</entry>
- <entry>
- <title type="html"><![CDATA[HTML5 Form Validation - Showing All Error Messages]]></title>
- <link href="http://tjvantoll.com/2012/08/05/html5-form-validation-showing-all-error-messages/"/>
- <updated>2012-08-05T16:21:00-04:00</updated>
- <id>http://tjvantoll.com/2012/08/05/html5-form-validation-showing-all-error-messages</id>
- <content type="html"><![CDATA[<p><a href="http://caniuse.com/#feat=form-validation">Browsers that support HTML5 form validation</a> have one thing in common; if a <code>&lt;form&gt;</code> is submitted and has errors on multiple fields, the browser will only display the first error to the user.</p>
-
-<p>Turns out the spec leaves the specific means of handling multiple errors up to the browser itself:</p>
-
-<p><blockquote><p>Report the problems with the constraints of at least one of the elements given in unhandled invalid controls to the user. User agents may focus one of those elements in the process, by running the focusing steps for that element, and may change the scrolling position of the document, or perform some other action that brings the element to the user's attention.</p></p><p><p>User agents may report more than one constraint violation. User agents may coalesce related constraint violation reports if appropriate (e.g. if multiple radio buttons in a group are marked as required, only one error need be reported).</p><footer><strong>HTML5 Specification</strong> <cite><a href='http://www.whatwg.org/specs/web-apps/current-work/#the-constraint-validation-api'>www.whatwg.org/specs/web-apps/&hellip;</a></cite></footer></blockquote></p>
-
-<p>The key part here being that user agents (i.e. browsers) <strong>MAY</strong> report more than one constraint violation (i.e. error). Turns out they all decided not to.</p>
-
-<!--more-->
-
-
-<p>You can see this in your browser below (assuming it <a href="http://caniuse.com/#feat=form-validation">supports HTML5 form validation</a> and is not Safari, more on that later). Both fields are <code>required</code>, but if you submit the form you will only see an error for the first field.</p>
-
-<pre class="codepen" data-type="result" data-href="FBGvu" data-user="tjvantoll" data-host="http://codepen.io"><code></code></pre>
-
-
-<script async src="http://codepen.io/assets/embed/ei.js"></script>
-
-
-<p>Here's what it looks like on supported browsers if you attempt to submit this empty <code>&lt;form&gt;</code>:</p>
-
-<h5>Chrome 21</h5>
-
-<p><img src="/images/posts/2012-08-05/Chrome.png" title="Chrome" alt="Chrome" /></p>
-
-<h5>Firefox 14</h5>
-
-<p><img src="/images/posts/2012-08-05/Firefox.png" title="Firefox" alt="Firefox" /></p>
-
-<h5>Opera 12</h5>
-
-<p><img src="/images/posts/2012-08-05/Opera.png" title="Opera" alt="Opera" /></p>
-
-<p>As you can see, all three only give an error for the first field. Firefox at least has the decency to put a red border around all fields with invalid data by default.</p>
-
-<p>The one noticeable browser missing from the list above is Safari. Even though Safari supports the constraint validation API, the validation itself is turned off.</p>
-
-<h3>Usability</h3>
-
-<p>From a usability perspective showing the users only the first error message is bad. Imagine how frustrating it would be to continually correct errors just to be presented with the next error in the sequence. If you've ran into a form such as this before you know what I'm talking about.</p>
-
-<p>Luckily, browsers provide a <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-constraint-validation-api">constraint validation API</a> that can be used to provide this functionality.</p>
-
-<h3>Using the Validation API</h3>
-
-<p>All dom nodes now possess a <a href="http://www.whatwg.org/specs/web-apps/current-work/#dom-cva-willvalidate_">willValidate</a> property that indicates whether the node is a candidate for form validation.</p>
-
-<p>Nodes in which <code>willValidate</code> is <code>true</code> also have a <code>validity</code> property. The <code>validity</code> property resolves to a <a href="https://developer.mozilla.org/en-US/docs/DOM/ValidityState">ValidityState object</a> which contains information about whether the field has validation errors, as well as the error message the browser will display to the user.</p>
-
-<p>To make things even easier browsers provide an <a href="https://developer.mozilla.org/en-US/docs/CSS/:invalid">:invalid pseduoselector</a> that can be used to select all elements with validation errors. Let's see how this can be leveraged to show all error messages.</p>
-
-<h3>The Code</h3>
-
-<p>Here's how I accomplished this with a jQuery dependent script.</p>
-
-<p>``` html
-<form></p>
-
-<pre><code>&lt;ul class="errorMessages"&gt;&lt;/ul&gt;
-
-&lt;label for="name"&gt;Name:&lt;/label&gt;
-&lt;input type="text" required /&gt;
-
-&lt;label for="comments"&gt;Comments:&lt;/label&gt;
-&lt;textarea id="comments" required&gt;&lt;/textarea&gt;
-
-&lt;input type="submit" value="Submit" /&gt;
-</code></pre>
-
-<p></form>​</p>
-
-<script>
-$(function() {
- var createAllErrors = function() {
- var form = $(this);
- var errorList = $('ul.errorMessages', form);
-
- var showAllErrorMessages = function() {
- errorList.empty();
-
- //Find all invalid fields within the form.
- form.find(':invalid').each(function(index, node) {
-
- //Find the field's corresponding label
- var label = $('label[for=' + node.id + ']');
-
- //Opera incorrectly does not fill the validationMessage property.
- var message = node.validationMessage || 'Invalid value.';
- errorList
- .show()
- .append('<li><span>' + label.html() + '</span> ' + message + '</li>');
- });
- };
-
- $('input[type=submit]', form).on('click', showAllErrorMessages);
- $('input[type=text]', form).on('keypress', function(event) {
- //keyCode 13 is Enter
- if (event.keyCode == 13) {
- showAllErrorMessages();
- }
- });
- };
-
- $('form').each(createAllErrors);
-});
-</script>
-
-
-<p>```</p>
-
-<p>You can see the results in your browser below:</p>
-
-<pre class="codepen" data-type="result" data-href="eLvlf" data-user="tjvantoll" data-host="http://codepen.io"><code></code></pre>
-
-
-<p>Here's how it looks in Chrome 21:</p>
-
-<p><img src="/images/posts/2012-08-05/Chrome-full.png" title="Chrome" alt="Chrome" /></p>
-
-<p>A couple things to note:</p>
-
-<p>1) If a user attempts to submit a form and gets validation errors, a <code>submit</code> event is never fired for the <code>&lt;form&gt;</code>. Therefore, instead of listening for <code>submit</code> on the <code>&lt;form&gt;</code>, I instead listen for a <code>click</code> on the <code>&lt;input type="submit"&gt;</code>. Since the user is also able to submit the form pressing enter in text inputs, I attach a <code>keypress</code> listener to them to ensure the same logic runs.</p>
-
-<p>2) In my example I start each error message with the contents of the field's <code>&lt;label&gt;</code>. This is because the messages for each field are often identical. An alternative approach would be to use another constraint validation API method, <a href="http://www.whatwg.org/specs/web-apps/current-work/#dom-cva-setcustomvalidity">setCustomValidity</a> to set a completely custom message.</p>
-
-<p>3) The <code>:invalid</code> selector will return nothing in all browsers that do not support the constraint validation API. Therefore this code will simply do nothing in those browsers.</p>
-
-<p>4) Opera incorrectly does not fill the <code>validationMessage</code> property. Therefore the check <code>var message = node.validationMessage || 'Invalid value.'</code> is necessary so a message is displayed for Opera.</p>
-
-<p>5) I do nothing to style the individual fields based on whether they have valid data. The HTML5 spec provides a number of CSS hooks to do this and I would recommend reading <a href="http://html5doctor.com/css3-pseudo-classes-and-html5-forms/">CSS Pseudo-Classes and HTML5 Forms</a> from <a href="http://html5doctor.com">html5 Doctor</a> if you're interested in including such styling.</p>
-
-<h3>That's a Lot of Code to Do Something Simple</h3>
-
-<p>Yep. While browser support is getting to be quite good for HTML5 forms the implementations themselves are still a bit buggy. Nevertheless, this approach will work for displaying all validation errors to the end user.</p>
-
-<h3>Polyfill</h3>
-
-<p>If you are interested in making the code above work in all browsers one option you have is to polyfill the functionality for unsupported browsers. One robust choice is the <a href="https://github.com/aFarkas/webshim">webshims</a> library.</p>
-
-<p>To make webshims work with the code above all you need to do is add <code>$.webshims.polyfill('forms');</code>. The maintainer, <a href="https://github.com/aFarkas">@aFarkas</a> was even kind of enough to provide me with a live example showing this - <a href="http://jsfiddle.net/trixta/HynHy/">http://jsfiddle.net/trixta/HynHy/</a>.</p>
-
-<h3>Update (September 5th, 2012)</h3>
-
-<p>Per some <a href="https://github.com/html5rocks/www.html5rocks.com/issues/175#issuecomment-8301873">critique on Github</a> from <a href="https://github.com/aFarkas">@aFarkas</a> I've made the following changes:</p>
-
-<ul>
-<li>Updated the example code.
-
-<ul>
-<li>Removed a hack I had in place for Safari.</li>
-<li>Switched to use the <code>:invalid</code> pseudoselector to find all invalid fields within a form.</li>
-<li>Make the script handle multiple <code>&lt;form&gt;</code> elements in one DOM.</li>
-</ul>
-</li>
-<li>Added the above section on using webshim to polyfill this behavior for all browsers.</li>
-</ul>
-
-]]></content>
- </entry>
-
</feed>
View
22 blog/categories/browsers/index.html
@@ -109,6 +109,20 @@ <h1 class="entry-title">Category: Browsers</h1>
<article>
+<h1><a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a></h1>
+<time datetime="2012-11-10T15:44:00-05:00" pubdate><span class='month'>Nov</span> <span class='day'>10</span> <span class='year'>2012</span></time>
+
+<footer>
+ <span class="categories">posted in <a class='category' href='/blog/categories/browsers/'>Browsers</a>, <a class='category' href='/blog/categories/css/'>CSS</a>, <a class='category' href='/blog/categories/html/'>HTML</a></span>
+</footer>
+
+
+</article>
+
+
+
+<article>
+
<h1><a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a></h1>
<time datetime="2012-10-17T12:48:00-04:00" pubdate><span class='month'>Oct</span> <span class='day'>17</span> <span class='year'>2012</span></time>
@@ -301,6 +315,10 @@ <h1 class="entry-title">Category: Browsers</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/">Creating a Polished Vertical Tabs Interaction with jQuery UI</a>
</li>
@@ -336,10 +354,6 @@ <h1 class="entry-title">Category: Browsers</h1>
<a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
</li>
- <li class="post">
- <a href="/2012/08/19/onscroll-event-issues-on-mobile-browsers/">onscroll Event Issues on Mobile Browsers</a>
- </li>
-
</ul>
</section>
View
365 blog/categories/css/atom.xml
@@ -4,7 +4,7 @@
<title><![CDATA[Category: CSS | TJ VanToll]]></title>
<link href="http://tjvantoll.com/blog/categories/css/atom.xml" rel="self"/>
<link href="http://tjvantoll.com/"/>
- <updated>2012-11-09T22:36:40-05:00</updated>
+ <updated>2012-11-10T17:45:05-05:00</updated>
<id>http://tjvantoll.com/</id>
<author>
<name><![CDATA[TJ VanToll]]></name>
@@ -14,6 +14,94 @@
<entry>
+ <title type="html"><![CDATA[Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach]]></title>
+ <link href="http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/"/>
+ <updated>2012-11-10T15:44:00-05:00</updated>
+ <id>http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody</id>
+ <content type="html"><![CDATA[<p>By default the <code>overflow</code> CSS property does not apply to table group elements (<code>&lt;thead&gt;</code>, <code>&lt;tbody&gt;</code>, or <code>&lt;tfoot&gt;</code>). <a href="https://developer.mozilla.org/en-US/docs/Firefox_4_for_developers#Miscellaneous_CSS_changes">As of Firefox 4</a> this behavior is consistent across all browser implementations.</p>
+
+<p>Therefore, if you attempt to apply a CSS <code>height</code> and <code>overflow: scroll</code> to a <code>&lt;tbody&gt;</code> it will have no effect in modern browsers. You can see this for yourself <a href="http://jsfiddle.net/tj_vantoll/vU494/">here</a>.</p>
+
+<p>But having a scrolling table body with fixed headers is a useful UI element, so how do you work around this?</p>
+
+<!--more-->
+
+
+<h3>The Solution</h3>
+
+<p>Here is my solution:</p>
+
+<p><pre class="codepen" data-height="400" data-type="result" data-href="JEKIu" data-user="tjvantoll"><code></code></pre>
+<script async src="http://codepen.io:/assets/embed/ei.js"></script></p>
+
+<h3>How does it work?</h3>
+
+<p>The first step is to set the <code>&lt;tbody&gt;</code> to <code>display: block</code> so an <code>overflow</code> and <code>height</code> can be applied. From there the rows in the <code>&lt;thead&gt;</code> need to be set to <code>position: relative</code> and <code>display: block</code> so that they'll sit on top of the now scrollable <code>&lt;tbody&gt;</code>.</p>
+