diff --git a/css/extensions/ColumnHider.css b/css/extensions/ColumnHider.css
index 70fdcf9b6..11df678be 100644
--- a/css/extensions/ColumnHider.css
+++ b/css/extensions/ColumnHider.css
@@ -1,13 +1,9 @@
 .dgrid-hider-toggle {
-	font-weight:normal;
+	background-position: 0 -192px;
 	cursor: pointer;
-}
-.dgrid-hider-toggle:hover {
-	font-weight: bold;
-}
-html.has-quirks .dgrid-header-scroll .dgrid-hider-toggle,
-html.has-ie-6 .dgrid-header-scroll .dgrid-hider-toggle {
-	font-size: 12px; /* override zeroed font-size for IE6/Quirks in dgrid.css */
+	position: absolute;
+	right: 0;
+	top: 0;
 }
 
 .dgrid-hider-menu {
diff --git a/extensions/ColumnHider.js b/extensions/ColumnHider.js
index e395f9583..c20116162 100644
--- a/extensions/ColumnHider.js
+++ b/extensions/ColumnHider.js
@@ -110,7 +110,7 @@ function(declare, has, listen, miscUtil, put){
 				// Assume that if this plugin is used, then columns are hidable.
 				// Create the toggle node.
 				hiderToggleNode = this.hiderToggleNode =
-					put(this.headerScrollNode, "div.dgrid-hider-toggle.dgrid-cell-padding", "+");
+					put(this.headerScrollNode, "div.ui-icon.dgrid-hider-toggle");
 				
 				this._listeners.push(listen(hiderToggleNode, "click", function(e){
 					grid._toggleColumnHiderMenu(e);