diff --git a/css/water.css b/css/water.css
index 641e787..6d359c4 100644
--- a/css/water.css
+++ b/css/water.css
@@ -62,6 +62,7 @@ body {
 }
 
 svg {
+	position: absolute;
 	background: #FFF;
 	border-top-left-radius: 5px;
 	border-bottom-left-radius: 5px;
diff --git a/js/water.js b/js/water.js
index 0ce6d38..29d99b9 100644
--- a/js/water.js
+++ b/js/water.js
@@ -1,5 +1,18 @@
 $(function() {
 
+// initially we were setting the svg dimensions on the html, as %,
+// but retrieving those dimensions in firefox returns %, not pixels
+// so we need to set the dimensions in pixels, based on the parent container
+// which in this case is #display
+function setSvgDimensions() {
+	var padding = 0.02;
+	$('svg').width($('#display').width() * (1 - padding));
+	$('svg').height($('#display').height() * (1 - padding));
+	$('svg').css('top', $('#display').height() * (padding/2));
+	$('svg').css('left', $('#display').width() * (padding/2));
+}
+setSvgDimensions();
+
 window.aceEditor = ace.edit("editor");
 
 // set the theme
@@ -29,7 +42,11 @@ function redrawSvg() {
 
 // redraw svg when we update our code or resize the window
 window.aceEditor.getSession().on('change', redrawSvg);
-$(window).on('resize', redrawSvg);
+$(window).on('resize', function() {
+
+	setSvgDimensions();
+	redrawSvg();
+});
 
 d3.text('http://gabrielflor.it/static/submodule/water/data/chord.txt', function(data) {