diff --git a/css/leaflet-routing.css b/css/leaflet-routing.css
index 25fb306..b0c7dfb 100644
--- a/css/leaflet-routing.css
+++ b/css/leaflet-routing.css
@@ -5,11 +5,13 @@ div.line-mouse-marker {
 }
 
 .dist-marker {
-    font-size: 11px;
+    font-size: 10px;
+    /* 1px less than height to also center in Firefox (?) */
+    line-height: 17px;
     border: 1px solid #777;
-    border-radius: 10px;
+    border-radius: 9px;
     text-align: center;
     text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
     color: black;
-    background: rgba(255, 255, 255, 0.4);
+    background: rgba(255, 255, 255, 0.5);
 }
diff --git a/js/plugin/Routing.js b/js/plugin/Routing.js
index 33c7678..9c4e726 100644
--- a/js/plugin/Routing.js
+++ b/js/plugin/Routing.js
@@ -17,7 +17,8 @@ BR.Routing = L.Routing.extend({
         snapping: null,
         zIndexOffset: -2000,
         distanceMarkers: {
-            iconSize: 20,
+            // width as base number, multiplied by number of digits + one for padding
+            iconSize: [6, 18],
             offset: 5000,
             textFunction: function(distance) {
                 return distance / 1000;
diff --git a/js/plugin/leaflet-distance-marker.js b/js/plugin/leaflet-distance-marker.js
index f536a2e..dd63a80 100644
--- a/js/plugin/leaflet-distance-marker.js
+++ b/js/plugin/leaflet-distance-marker.js
@@ -66,8 +66,10 @@ L.DistanceMarkers = L.LayerGroup.extend({
             var m_line = L.polyline([p1, p2]);
             var ratio = (distance - accumulated[j - 1]) / (accumulated[j] - accumulated[j - 1]);
             var position = L.GeometryUtil.interpolateOnLine(map, m_line, ratio);
-            var icon = L.divIcon({ className: cssClass, html: text, iconSize: iconSize });
-            var marker = L.marker(position.latLng, { title: text, icon: icon });
+            // width as base number, one for padding + multiply by number of digits
+            var size = [iconSize[0] + iconSize[0] * ('' + text).length, iconSize[1]];
+            var icon = L.divIcon({ className: cssClass, html: text, iconSize: size });
+            var marker = L.marker(position.latLng, { title: text, icon: icon, interactive: false });
 
             // visible only starting at a specific zoom level
             var zoom = this._minimumZoomLevelForItem(i, showAll);