From a6a21d21aecfe66c70aa196de2bfb489509d610f Mon Sep 17 00:00:00 2001
From: Mark Salsbery <msalsbery@hotmail.com>
Date: Fri, 6 Dec 2013 11:22:51 -0800
Subject: [PATCH 1/4] Button Image Alignment Fix (#272, #30)

Changed button element from button to div for consistent rendering
across browsers.
---
 src/button.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/button.js b/src/button.js
index abadaff4..36d1a72d 100644
--- a/src/button.js
+++ b/src/button.js
@@ -120,7 +120,7 @@ $.Button = function( options ) {
      * @member {Element} element
      * @memberof OpenSeadragon.Button#
      */
-    this.element        = options.element   || $.makeNeutralElement( "button" );
+    this.element        = options.element   || $.makeNeutralElement( "div" );
 
     //if the user has specified the element to bind the control to explicitly
     //then do not add the default control images
@@ -183,6 +183,7 @@ $.Button = function( options ) {
     // Whether this button should fade after user stops interacting with the viewport.
     this.shouldFade     = false;
 
+    this.element.style.cursor   = "pointer";
     this.element.style.display  = "inline-block";
     this.element.style.position = "relative";
     this.element.title          = this.tooltip;

From e07047517269fd0e39a8b5aec4f6f708987b0aaf Mon Sep 17 00:00:00 2001
From: Mark Salsbery <msalsbery@hotmail.com>
Date: Fri, 6 Dec 2013 15:51:11 -0800
Subject: [PATCH 2/4] Button Tab Index Fix

---
 src/button.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/button.js b/src/button.js
index 36d1a72d..93b3222b 100644
--- a/src/button.js
+++ b/src/button.js
@@ -186,6 +186,7 @@ $.Button = function( options ) {
     this.element.style.cursor   = "pointer";
     this.element.style.display  = "inline-block";
     this.element.style.position = "relative";
+    this.element.tabIndex       = "0";
     this.element.title          = this.tooltip;
 
     /**

From d3bcd0cec8ed643f2ed8cc5f2229fccfbe176871 Mon Sep 17 00:00:00 2001
From: Mark Salsbery <msalsbery@hotmail.com>
Date: Fri, 6 Dec 2013 16:24:52 -0800
Subject: [PATCH 3/4] Better Button Fix

Wrapped the images in a single div and used that as the content of a
button element.
---
 src/button.js | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/button.js b/src/button.js
index 93b3222b..50cc4dd3 100644
--- a/src/button.js
+++ b/src/button.js
@@ -120,7 +120,7 @@ $.Button = function( options ) {
      * @member {Element} element
      * @memberof OpenSeadragon.Button#
      */
-    this.element        = options.element   || $.makeNeutralElement( "div" );
+    this.element        = options.element   || $.makeNeutralElement( "button" );
 
     //if the user has specified the element to bind the control to explicitly
     //then do not add the default control images
@@ -129,22 +129,23 @@ $.Button = function( options ) {
         this.imgGroup     = $.makeTransparentImage( this.srcGroup );
         this.imgHover     = $.makeTransparentImage( this.srcHover );
         this.imgDown      = $.makeTransparentImage( this.srcDown );
+        this.imgDiv       = $.makeNeutralElement( "div" );
 
-        this.element.appendChild( this.imgRest );
-        this.element.appendChild( this.imgGroup );
-        this.element.appendChild( this.imgHover );
-        this.element.appendChild( this.imgDown );
+        this.imgDiv.style.position = "relative";
 
+        //this.imgRest.style.position =
         this.imgGroup.style.position =
         this.imgHover.style.position =
         this.imgDown.style.position  =
             "absolute";
 
+        this.imgRest.style.top =
         this.imgGroup.style.top =
         this.imgHover.style.top =
         this.imgDown.style.top  =
             "0px";
 
+        this.imgRest.style.left =
         this.imgGroup.style.left =
         this.imgHover.style.left =
         this.imgDown.style.left  =
@@ -160,6 +161,12 @@ $.Button = function( options ) {
             this.imgDown.style.top  =
                 "";
         }
+
+        this.imgDiv.appendChild( this.imgRest );
+        this.imgDiv.appendChild( this.imgGroup );
+        this.imgDiv.appendChild( this.imgHover );
+        this.imgDiv.appendChild( this.imgDown );
+        this.element.appendChild( this.imgDiv );
     }
 
 
@@ -183,10 +190,8 @@ $.Button = function( options ) {
     // Whether this button should fade after user stops interacting with the viewport.
     this.shouldFade     = false;
 
-    this.element.style.cursor   = "pointer";
     this.element.style.display  = "inline-block";
     this.element.style.position = "relative";
-    this.element.tabIndex       = "0";
     this.element.title          = this.tooltip;
 
     /**

From 374d0288dd8f354ac608433dec3220de59441ddc Mon Sep 17 00:00:00 2001
From: Mark Salsbery <msalsbery@hotmail.com>
Date: Fri, 6 Dec 2013 16:28:49 -0800
Subject: [PATCH 4/4] Code cleanup

Removed commented and leftover code
---
 src/button.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/button.js b/src/button.js
index 50cc4dd3..23b51c17 100644
--- a/src/button.js
+++ b/src/button.js
@@ -133,19 +133,16 @@ $.Button = function( options ) {
 
         this.imgDiv.style.position = "relative";
 
-        //this.imgRest.style.position =
         this.imgGroup.style.position =
         this.imgHover.style.position =
         this.imgDown.style.position  =
             "absolute";
 
-        this.imgRest.style.top =
         this.imgGroup.style.top =
         this.imgHover.style.top =
         this.imgDown.style.top  =
             "0px";
 
-        this.imgRest.style.left =
         this.imgGroup.style.left =
         this.imgHover.style.left =
         this.imgDown.style.left  =