diff --git a/editor/svg-editor.css b/editor/svg-editor.css
index 1835c564..c3fd4a87 100644
--- a/editor/svg-editor.css
+++ b/editor/svg-editor.css
@@ -1,3 +1,7 @@
+body {
+	background-color: #E8E8E8;
+}
+
 #svg_editor {
 	font-size: 8pt;
 	font-family: Verdana, Helvetica, Arial;
@@ -18,24 +22,30 @@
 }
 
 #svg_editor #svgroot {
-	width: 640px;
-	height: 480px;
 	-moz-user-select: none;
 }
 
 #svg_editor #svgcanvas {
+	background-color: #FFFFFF;
+	text-align: center;
+	vertical-align: middle;
 	width: 640px;
 	height: 480px;
-	border: 1px solid #808080;
+	border-left: 1px solid #FFFFFF;
+	border-top: 1px solid #FFFFFF;
+	border-right: 1px solid #808080;
+	border-bottom: 1px solid #808080;	
 }
 
 #svg_editor div#palette_holder {
-	border: 1px solid #808080;
+	border: 2px solid #808080;
 	border-top: none;
-	float: left;
-	width: 640px;
 	overflow-x: scroll;
 	overflow-y: hidden;
+	position: absolute;
+	left: 75px;
+	right: 2px;
+	bottom: 22px;
 	height: 31px;
 }
 
@@ -61,7 +71,14 @@
 }
 
 #svg_editor div#workarea {
-	float: left;
+	position:absolute;
+	top: 70px;
+	left: 75px;
+	right: 2px;
+	bottom: 53px;
+	background-color: #E8E8E8;
+	border: 2px solid #808080;
+	overflow: auto;
 }
 
 #svg_editor div.palette_item {
@@ -71,16 +88,16 @@
 }
 
 #svg_editor .tools_panel {
-	background: #E8E8E8;
-	border: 1px solid #808080;
-	padding: 4px;
-	float: left;
-	clear: both;
+/*	background: #E8E8E8;*/
+/*	border: 1px solid #808080;*/
 }
 
 #svg_editor #context_tools {
-	width: 705px;
-	height: 34px;
+	position: absolute;
+	left: 19px;
+	right: 2px;
+	top: 2px;
+	height: 68px;
 	border-bottom: none;
 }
 
@@ -88,10 +105,22 @@
 	float: left;
 }
 
+#svg_editor #tools_container {
+	position: absolute;
+	left: 2px;
+	top: 70px;
+	bottom: 22px;
+}
+
 #svg_editor #tools {
 	border-right: none;
-	height: 504px;
-	width: 64px;
+	width: 70px;
+	text-align: center;
+}
+
+/* TODO: fix this */
+div.color_block {
+	display:inline-block;
 }
 
 #svg_editor #selected_panel {
@@ -184,6 +213,7 @@
 	display: none;
 	cursor: pointer;
 	float: left;
+	width: 300px;
 }
 
 #svg_editor #tool_square {
@@ -222,12 +252,18 @@
 }
 
 #svg_editor #footer {
-	width: 705px;
+	position: absolute;
+	left: 75px;
+	right: 2px;
+	bottom: 2px;
+	height: 20px;
 	border-top: none;
 }
 
 #svg_editor #footer_left {
 	float: left;
+	position: absolute;
+	top: -2px;
 }
 
 #svg_editor #footer_right {
diff --git a/editor/svg-editor.html b/editor/svg-editor.html
index 32a0fe8d..c7e469ab 100644
--- a/editor/svg-editor.html
+++ b/editor/svg-editor.html
@@ -14,18 +14,12 @@
 
 <div id="svg_editor">
 
-<div id="color_picker" class="tools_flyout"></div>
+<div id="workarea">
 
-<div id="tools_rect" class="tools_flyout">
-<div id="tool_square" title="Square"></div>
-<div id="tool_rect" title="Rectangle"></div>
-<div id="tool_fhrect" title="Free-Hand Rectangle"></div>
+<style id="styleoverrides" type="text/css"></style>
+<div id="svgcanvas">
 </div>
 
-<div id="tools_ellipse" class="tools_flyout">
-<div id="tool_circle" title="Circle"></div>
-<div id="tool_ellipse" title="Ellipse"></div>
-<div id="tool_fhellipse" title="Free-Hand Ellipse"></div>
 </div>
 
 <div id="context_tools" class="tools_panel">
@@ -139,114 +133,117 @@
 	</div>
 </div>
 
-<div id="tools" class="tools_panel">
-
-<img class="tool_button_current" id="tool_select" src="images/select.png" title="Select Tool [1]" alt="Select"/><br/>
-<img class="tool_button" id="tool_path" src="images/path.png" title="Pencil Tool [2]" alt="Pencil"/><br/>
-<img class="tool_button" id="tool_line" src="images/line.png" title="Line Tool [3]" alt="Line"/><br/>
-<img class="tool_button" id="tools_rect_show" src="images/square.png" title="Square/Rect Tool [4/Shift+4]" alt="Square"/><br/>
-<img class="tool_button" id="tools_ellipse_show" src="images/circle.png" title="Ellipse/Circle Tool [5/Shift+5]" alt="Circle"/><br/>
-<img class="tool_button" id="tool_text" src="images/text.png" title="Text Tool [6]" alt="Text"/>
-
-<hr/>
-
-<div>opacity<br/>
-<select id="group_opacity" title="Change group opacity">
-<option selected="selected" value="1">100 %</option>
-<option value="0.9">90 %</option>
-<option value="0.8">80 %</option>
-<option value="0.7">70 %</option>
-<option value="0.6">60 %</option>
-<option value="0.5">50 %</option>
-<option value="0.4">40 %</option>
-<option value="0.3">30 %</option>
-<option value="0.2">20 %</option>
-<option value="0.1">10 %</option>
-</select>
-</div>
-
-<hr/>
-
-<div>fill
-<div id="fill_color" title="Change fill color"></div>
-<select id="fill_opacity" title="Change fill opacity">
-<option selected="selected" value="1">100 %</option>
-<option value="0.9">90 %</option>
-<option value="0.8">80 %</option>
-<option value="0.7">70 %</option>
-<option value="0.6">60 %</option>
-<option value="0.5">50 %</option>
-<option value="0.4">40 %</option>
-<option value="0.3">30 %</option>
-<option value="0.2">20 %</option>
-<option value="0.1">10 %</option>
-</select>
-</div>
-
-<hr/>
-
-<div>stroke
-<div id="stroke_color" title="Change stroke color"></div>
-<div>
-<select id="stroke_width" title="Change stroke width">
-<option selected="selected" value="1">1</option>
-<option value="2">2</option>
-<option value="3">3</option>
-<option value="5">5</option>
-<option value="7">7</option>
-</select>
-</div><div>
-<select id="stroke_style" title="Change stroke dash style">
-<option selected="selected" value="none">---</option>
-<option value="2,2">...</option>
-<option value="5,5">- -</option>
-<option value="5,2,2,2">- .</option>
-<option value="5,2,2,2,2,2">- ..</option>
-</select>
-</div>
-<div>
-<select id="stroke_opacity" title="Change stroke opacity">
-<option selected="selected" value="1">100 %</option>
-<option value="0.9">90 %</option>
-<option value="0.8">80 %</option>
-<option value="0.7">70 %</option>
-<option value="0.6">60 %</option>
-<option value="0.5">50 %</option>
-<option value="0.4">40 %</option>
-<option value="0.3">30 %</option>
-<option value="0.2">20 %</option>
-<option value="0.1">10 %</option>
-</select>
-</div>
-</div>
-
-</div>
-
-<div id="workarea">
-
-<style id="styleoverrides" type="text/css"></style>
-<div id="svgcanvas">
-</div>
-
 <div id="palette_holder">
-<div id="palette" title="Click to change fill color, shift-click to change stroke color">
-</div>
-</div>
-
+	<div id="palette" title="Click to change fill color, shift-click to change stroke color"></div>
 </div>
 
 <div id="footer" class="tools_panel">
-<div id="footer_left">
-<select id="resolution">
-<option selected="selected">640x480</option>
-<option>800x600</option>
-<option>1024x768</option>
-</select>
-</div><div id ="footer_right">
-SVG-edit v2.2-preAlpha @ <a href="http://svg-edit.googlecode.com/">http://svg-edit.googlecode.com/</a>
-</div>
+	<div id="footer_left">
+		<select id="resolution">
+			<option selected="selected">640x480</option>
+			<option>800x600</option>
+			<option>1024x768</option>
+			<option>1280x960</option>
+			<option>1600x1200</option>
+		</select>
+	</div>
+	<div id ="footer_right">SVG-edit v2.2-preAlpha @ <a href="http://svg-edit.googlecode.com/">http://svg-edit.googlecode.com/</a>
+	</div>
 </div>
 
+<div id="tools_container">
+	<div id="tools" class="tools_panel">
+		<img class="tool_button_current" id="tool_select" src="images/select.png" title="Select Tool [1]" alt="Select"/><br/>
+		<img class="tool_button" id="tool_path" src="images/path.png" title="Pencil Tool [2]" alt="Pencil"/><br/>
+		<img class="tool_button" id="tool_line" src="images/line.png" title="Line Tool [3]" alt="Line"/><br/>
+		<img class="tool_button" id="tools_rect_show" src="images/square.png" title="Square/Rect Tool [4/Shift+4]" alt="Square"/><br/>
+		<img class="tool_button" id="tools_ellipse_show" src="images/circle.png" title="Ellipse/Circle Tool [5/Shift+5]" alt="Circle"/><br/>
+		<img class="tool_button" id="tool_text" src="images/text.png" title="Text Tool [6]" alt="Text"/>
+
+		<hr/>
+
+		<div>opacity<br/>
+			<select id="group_opacity" title="Change group opacity">
+				<option selected="selected" value="1">100 %</option>
+				<option value="0.9">90 %</option>
+				<option value="0.8">80 %</option>
+				<option value="0.7">70 %</option>
+				<option value="0.6">60 %</option>
+				<option value="0.5">50 %</option>
+				<option value="0.4">40 %</option>
+				<option value="0.3">30 %</option>
+				<option value="0.2">20 %</option>
+				<option value="0.1">10 %</option>
+			</select>
+		</div> <!-- opacity -->
+
+		<hr/>
+
+		<div>fill<br/>
+			<div id="fill_color" class="color_block"  title="Change fill color"></div>
+			<select id="fill_opacity" title="Change fill opacity">
+				<option selected="selected" value="1">100 %</option>
+				<option value="0.9">90 %</option>
+				<option value="0.8">80 %</option>
+				<option value="0.7">70 %</option>
+				<option value="0.6">60 %</option>
+				<option value="0.5">50 %</option>
+				<option value="0.4">40 %</option>
+				<option value="0.3">30 %</option>
+				<option value="0.2">20 %</option>
+				<option value="0.1">10 %</option>
+			</select>
+		</div> <!-- fill -->
+
+		<hr/>
+
+		<div>stroke<br/>
+			<div id="stroke_color" class="color_block" title="Change stroke color"></div><br/>
+			<select id="stroke_width" title="Change stroke width">
+				<option selected="selected" value="1">1</option>
+				<option value="2">2</option>
+				<option value="3">3</option>
+				<option value="5">5</option>
+				<option value="7">7</option>
+			</select>
+			<select id="stroke_style" title="Change stroke dash style">
+				<option selected="selected" value="none">---</option>
+				<option value="2,2">...</option>
+				<option value="5,5">- -</option>
+				<option value="5,2,2,2">- .</option>
+				<option value="5,2,2,2,2,2">- ..</option>
+			</select>
+			<select id="stroke_opacity" title="Change stroke opacity">
+				<option selected="selected" value="1">100 %</option>
+				<option value="0.9">90 %</option>
+				<option value="0.8">80 %</option>
+				<option value="0.7">70 %</option>
+				<option value="0.6">60 %</option>
+				<option value="0.5">50 %</option>
+				<option value="0.4">40 %</option>
+				<option value="0.3">30 %</option>
+				<option value="0.2">20 %</option>
+				<option value="0.1">10 %</option>
+			</select>
+		</div> <!-- stroke -->
+	</div> <!-- tools -->
+
+	<div id="color_picker" class="tools_flyout"></div>
+
+	<div id="tools_rect" class="tools_flyout">
+		<div id="tool_square" title="Square"></div>
+		<div id="tool_rect" title="Rectangle"></div>
+		<div id="tool_fhrect" title="Free-Hand Rectangle"></div>
+	</div>
+
+	<div id="tools_ellipse" class="tools_flyout">
+		<div id="tool_circle" title="Circle"></div>
+		<div id="tool_ellipse" title="Ellipse"></div>
+		<div id="tool_fhellipse" title="Free-Hand Ellipse"></div>
+	</div>
+
+</div> <!-- tools_container -->
+
 </div>
 
 <script type="text/javascript">
diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js
index 6206f51f..9ee7dead 100644
--- a/editor/svgcanvas.js
+++ b/editor/svgcanvas.js
@@ -494,8 +494,8 @@ function SvgCanvas(c)
 	//   and do nothing else
 	var mouseDown = function(evt)
 	{
-		var x = evt.pageX - container.offsetLeft;
-		var y = evt.pageY - container.offsetTop;
+		var x = evt.pageX - container.parentNode.offsetLeft;
+		var y = evt.pageY - container.parentNode.offsetTop;
 		switch (current_mode) {
 			case "select":
 				started = true;
@@ -652,8 +652,8 @@ function SvgCanvas(c)
 	var mouseMove = function(evt)
 	{
 		if (!started) return;
-		var x = evt.pageX - container.offsetLeft;
-		var y = evt.pageY - container.offsetTop;
+		var x = evt.pageX - container.parentNode.offsetLeft;
+		var y = evt.pageY - container.parentNode.offsetTop;
 		var shape = svgdoc.getElementById(getId());
 		switch (current_mode)
 		{