diff --git a/lib/network/css/network-manipulation.css b/lib/network/css/network-manipulation.css
index 946c9480..dbd297f9 100644
--- a/lib/network/css/network-manipulation.css
+++ b/lib/network/css/network-manipulation.css
@@ -14,7 +14,6 @@ div.network-manipulationDiv {
 
     width: 600px;
     height:30px;
-    z-index:10;
     position:absolute;
 }
 
@@ -125,4 +124,12 @@ div.network-seperatorLine {
     height:20px;
     background-color: #bdbdbd;
     margin: 5px 7px 0px 15px;
+}
+
+div.network-navigation_wrapper {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
 }
\ No newline at end of file
diff --git a/lib/network/mixins/NavigationMixin.js b/lib/network/mixins/NavigationMixin.js
index d63d8cd5..9db75aa2 100644
--- a/lib/network/mixins/NavigationMixin.js
+++ b/lib/network/mixins/NavigationMixin.js
@@ -4,8 +4,8 @@ var Hammer = require('../../module/hammer');
 exports._cleanNavigation = function() {
   // clean up previous navigation items
   var wrapper = document.getElementById('network-navigation_wrapper');
-  if (wrapper != null) {
-    this.containerElement.removeChild(wrapper);
+  if (wrapper && wrapper.parentNode) {
+    wrapper.parentNode.removeChild(wrapper);
   }
   document.onmouseup = null;
 };
@@ -26,23 +26,20 @@ exports._loadNavigationElements = function() {
   var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','zoomExtent'];
 
   this.navigationDivs['wrapper'] = document.createElement('div');
-  this.navigationDivs['wrapper'].id = "network-navigation_wrapper";
-  this.navigationDivs['wrapper'].style.position = "absolute";
-  this.navigationDivs['wrapper'].style.width = this.frame.canvas.clientWidth + "px";
-  this.navigationDivs['wrapper'].style.height = this.frame.canvas.clientHeight + "px";
-  this.containerElement.insertBefore(this.navigationDivs['wrapper'],this.frame);
+  this.navigationDivs['wrapper'].id = 'network-navigation_wrapper';
+  this.frame.appendChild(this.navigationDivs['wrapper'],this.frame);
 
   var me = this;
   for (var i = 0; i < navigationDivs.length; i++) {
     this.navigationDivs[navigationDivs[i]] = document.createElement('div');
-    this.navigationDivs[navigationDivs[i]].id = "network-navigation_" + navigationDivs[i];
-    this.navigationDivs[navigationDivs[i]].className = "network-navigation " + navigationDivs[i];
+    this.navigationDivs[navigationDivs[i]].id = 'network-navigation_' + navigationDivs[i];
+    this.navigationDivs[navigationDivs[i]].className = 'network-navigation ' + navigationDivs[i];
     this.navigationDivs['wrapper'].appendChild(this.navigationDivs[navigationDivs[i]]);
     var hammer = Hammer(this.navigationDivs[navigationDivs[i]], {prevent_default: true});
-    hammer.on("touch", me[navigationDivActions[i]].bind(me));
+    hammer.on('touch', me[navigationDivActions[i]].bind(me));
   }
   var hammer = Hammer(document, {prevent_default: false});
-  hammer.on("release", me._stopMovement.bind(me));
+  hammer.on('release', me._stopMovement.bind(me));
 };
 
 /**