diff --git a/TODO.md b/TODO.md
index 19ae5ab..d768c95 100644
--- a/TODO.md
+++ b/TODO.md
@@ -3,5 +3,5 @@ TODO
  - <del>Styling</del>
  - <del>Prevent double-clicking prevent from zooming map</del>
  - <del>Make panning offset configurable</del>
- - Do something about the hardcoded support for the zoom- and zoomslider controls.
+ - <del>Do something about the hardcoded support for the zoom- and zoomslider controls.<del>
  - <del>Make special CSS's for IE.</del>
diff --git a/examples/script.js b/examples/script.js
index af4cfd6..ae0cfa8 100644
--- a/examples/script.js
+++ b/examples/script.js
@@ -20,5 +20,8 @@ var map = L.TileJSON.createMap('map', osmTileJSON, {
 	mapOptions: { zoomControl: false }
 });
 
-L.control.pan().addTo(map);
-L.control.zoom().addTo(map);
+var options = {
+	position: 'topleft'
+};
+L.control.pan(options).addTo(map);
+L.control.zoom({ position: options.position }).addTo(map);
diff --git a/src/L.Control.Pan.css b/src/L.Control.Pan.css
index 63aa089..be226ac 100644
--- a/src/L.Control.Pan.css
+++ b/src/L.Control.Pan.css
@@ -1,92 +1,74 @@
-/* Make the default zoom control align with the pan control.
-   
-   This is ugly. 
-   The parent box (class="leaflet-top leaflet-left") 
-   should make all the child boxes be center-aligned instead. 
-   Not sure if that is possible though.
-*/
-.leaflet-left.has-leaflet-pan-control .leaflet-control-zoom {
-	position: relative;
-	left: 24px;
-}
-.leaflet-right.has-leaflet-pan-control .leaflet-control-zoom {
-	position: relative;
-	right: 24px;
-}
-
-/* 
-   Make the zoomSlider control 
-   (https://github.com/mattiasbengtsson/Leaflet.zoomslider) 
-   align with the pan control. 
-*/
-.leaflet-left.has-leaflet-pan-control .leaflet-control-zoomslider {
-	position: relative;
-	left: 22px;
-}
-.leaflet-right.has-leaflet-pan-control .leaflet-control-zoomslider {
-	position: relative;
-	right: 22px;
-}
-
-.leaflet-control-pan  {
-	   /* 
-	     .leaflet-control-pan-right-wrap: right 
-	   + .leaflet-control-pan a: width
-	   = 52 + 24 = 76
-	   */
-	width: 76px; 
-	   /* 
-	     .leaflet-control-pan-down-wrap: top
-	   + .leaflet-control-pan a: height
-	   = 52 + 24 = 76
-	   */
-	height: 76px;
+.leaflet-left.has-leaflet-pan-control {
+	left: 24.5px; /* (75-26)/2 */
+}
+.leaflet-right.has-leaflet-pan-control {
+	right: 24.5px;
 }
 
-.leaflet-control-pan > div {
-    -moz-border-radius: 4px;
-    -webkit-border-radius: 4px;
-    border-radius: 4px;
+.leaflet-left.has-leaflet-pan-control .leaflet-control-scale {
+	left: -24.5px;
 }
-.leaflet-control-pan > div {
-  box-shadow: 0 1px 7px rgba(0,0,0,0.65);
+.leaflet-right.has-leaflet-pan-control .leaflet-control-scale {
+	right: -24.5px;
 }
-.leaflet-control-pan a {
-    background-color: #fff;
+
+.leaflet-left .leaflet-control-pan {
+	left: -24.5px;
 }
-.leaflet-control-pan a{
-    background-position: 50% 50%;
-    background-repeat: no-repeat;
-    display: block;
+.leaflet-right .leaflet-control-pan {
+	right: -24.5px;
+}
+
+.leaflet-control-pan {
+	/*
+	  .leaflet-control-pan-right-wrap: right
+	+ .leaflet-control-pan a: width
+	= 52 + 23 = 75
+	*/
+	width: 75px;
+	/*
+	  .leaflet-control-pan-down-wrap: top
+	+ .leaflet-control-pan a: height
+	= 52 + 23 = 75
+	*/
+	height: 75px;
+}
+
+.leaflet-control-pan > div {
+	-moz-border-radius: 4px;
+	-webkit-border-radius: 4px;
+	border-radius: 4px;
+	box-shadow: 0 1px 7px rgba(0,0,0,0.65);
+	position: absolute;
 }
 .leaflet-control-pan a {
-    -moz-border-radius: 4px;
-    -webkit-border-radius: 4px;
-    border-radius: 4px;
-    width: 23px;
-    height: 23px;
+	background-color: #fff;
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+	-moz-border-radius: 4px;
+	-webkit-border-radius: 4px;
+	border-radius: 4px;
+	display: block;
+	width: 23px;
+	height: 23px;
 }
 .leaflet-control-pan a:hover {
-    background-color: #f4f4f4;
+	background-color: #f4f4f4;
 }
 
 .leaflet-control-pan-up-wrap {
-	position:absolute;
-	left:26px;
+	left: 26px;
 }
 .leaflet-control-pan-left-wrap {
-	position:absolute;
-	top:26px;
+	top: 26px;
 }
 .leaflet-control-pan-right-wrap {
-	position:absolute;
-	left:52px;	
-	top:26px;
+	left: 52px;
+	top: 26px;
 }
 .leaflet-control-pan-down-wrap {
-	position:absolute;
-	left:26px;
-	top:52px;
+	left: 26px;
+	top: 52px;
 }
 
 .leaflet-control-pan-up {
@@ -103,45 +85,56 @@
 }
 
 /****** Touch Alterations ******/
-.leaflet-touch .leaflet-control-pan div {
-  border: 2px solid rgba(0, 0, 0, 0.2);
-  box-shadow: none;
+.leaflet-touch .leaflet-left.has-leaflet-pan-control {
+	left: 26px;  /* (86-30)/2-2 */
+}
+.leaflet-touch .leaflet-right.has-leaflet-pan-control {
+	right: 26px;
+}
+
+.leaflet-touch .leaflet-left.has-leaflet-pan-control .leaflet-control-scale {
+	left: -26px;
+}
+.leaflet-touch .leaflet-right.has-leaflet-pan-control .leaflet-control-scale {
+	right: -26px;
+}
 
-  border-radius: 4px;
+.leaflet-touch .leaflet-left .leaflet-control-pan {
+	left: -26px;
+}
+.leaflet-touch .leaflet-right .leaflet-control-pan {
+	right: -26px;
 }
 
 .leaflet-touch .leaflet-control-pan {
-  width: 89px;
-  height: 119px;
-  margin-left: 8px;
+	width: 86px; /* 52+30+2*2 */
+	height: 114px;
 }
 
-.leaflet-touch .leaflet-right .leaflet-control-pan {
-  margin-left: 0;
-  margin-right: 5px;
+.leaflet-touch .leaflet-control-pan div {
+	border: 2px solid rgba(0, 0, 0, 0.2);
+	box-shadow: none;
 }
 
 .leaflet-touch .leaflet-control-pan a {
-  width: 30px;
-  height: 30px;
-
-  border-radius: 4px;
+	width: 30px;
+	height: 30px;
 }
 
 .leaflet-touch .leaflet-control-pan-up-wrap {
-  left:26px;
+	left: 26px;
 }
 
 .leaflet-touch .leaflet-control-pan-left-wrap {
-  top:40px;
+	top: 40px;
 }
 
 .leaflet-touch .leaflet-control-pan-right-wrap {
-  left:52px;
-  top:40px;
+	left: 52px;
+	top: 40px;
 }
 
 .leaflet-touch .leaflet-control-pan-down-wrap {
-  left:26px;
-  top:80px;
+	left: 26px;
+	top: 80px;
 }
diff --git a/src/L.Control.Pan.ie.css b/src/L.Control.Pan.ie.css
index a8c0678..ecc947d 100644
--- a/src/L.Control.Pan.ie.css
+++ b/src/L.Control.Pan.ie.css
@@ -1,40 +1,39 @@
-
 .leaflet-control-pan > div {
 	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#3F000000',EndColorStr='#3F000000');
-  border: 3px solid #999;
+	border: 3px solid #999;
 }
 .leaflet-control-pan a {
 	background-color: #fff;
-  width: 17px;
-  height: 17px;
+	width: 17px;
+	height: 17px;
 }
 .leaflet-control-pan a:hover {
-  background-color: #f4f4f4;
+	background-color: #f4f4f4;
 }
 
 .leaflet-control-pan-up-wrap {
-	position:absolute;
-	left:27px;
+	position: absolute;
+	left: 27px;
 }
 .leaflet-control-pan-left-wrap {
-	position:absolute;
-	top:27px;
+	position: absolute;
+	top: 27px;
 }
 .leaflet-control-pan-right-wrap {
-	position:absolute;
-	left:54px;	
-	top:27px;
+	position: absolute;
+	left: 54px;
+	top: 27px;
 }
 .leaflet-control-pan-down-wrap {
-	position:absolute;
-	left:27px;
-	top:54px;
+	position: absolute;
+	left: 27px;
+	top: 54px;
 }
 
 .leaflet-control-zoom {
-	left:23px;
+	left: 23px;
 }
 .leaflet-control-zoomslider {
 	position: relative;
-	left:23px;
+	left: 23px;
 }