diff --git a/editor/svg-editor.css b/editor/svg-editor.css
index df3ad48b..fa31ac29 100644
--- a/editor/svg-editor.css
+++ b/editor/svg-editor.css
@@ -121,16 +121,36 @@ body {
 }
 
 #svg_editor #layerlist {
-	margin: 0px;
+	margin: 1px;
+	padding: 0px;
 	width: 110px;
+	border-collapse: collapse;	
+	border: 1px solid #808080;
+	background-color: #FFFFFF;
 }
 
-/* TODO: Make this work in more than just Firefox */
-#svg_editor #layerlist option {
-/*	background-image: url('images/eye.png');*/
+#svg_editor #layerlist tr.layer {
+	background-color: #FFFFFF;
+	margin: 0px;
+	padding: 0px;
+}
+#svg_editor #layerlist tr.layersel {
+	border: 1px solid #808080;
+	background-color: #CCCCCC;
+}
+
+#svg_editor #layerlist td.layervis {
+	background-image: url('images/eye.png');
 	background-repeat: no-repeat;
-	background-position: 4px center;
-	padding-left: 25px;
+	background-position: 3px center;
+	width: 22px;
+}
+#svg_editor #layerlist td.layerinvis {
+	background-image: none;
+}
+
+#svg_editor #layerlist tr.layersel td.layername {
+	font-weight: bold;
 }
 
 #svg_editor div.palette_item {
diff --git a/editor/svg-editor.html b/editor/svg-editor.html
index a0af1a11..f89dc24f 100644
--- a/editor/svg-editor.html
+++ b/editor/svg-editor.html
@@ -50,11 +50,12 @@
 			<img id="layer_down" class="layer_button" src="images/go-down.png" alt="Move Layer Down" title="Move Layer Down"/>
 		</fieldset>
 		
-		<select id="layerlist" size="20" multiple="multiple">
-			<option value="Layer 1" selected="selected">Layer 1</option>
-			<option value="Layer 2">Layer 2</option>
-			<option value="Layer 3">Layer 3</option>
-		</select>
+		<table id="layerlist">
+			<tr class="layer">
+				<td class="layervis"></td>
+				<td class="layername">Layer 1</td>
+			</td>
+		</table>
 	</div>
 </div>
 
diff --git a/editor/svg-editor.js b/editor/svg-editor.js
index 7efd99bb..0d64db8c 100644
--- a/editor/svg-editor.js
+++ b/editor/svg-editor.js
@@ -1102,8 +1102,8 @@ function svg_edit_setup() {
 		svgCanvas.createLayer(newName);
 		updateContextPanel();
 		populateLayers();
-		$('#layerlist option').removeAttr("selected");
-		$('#layerlist option:first').attr("selected", "selected");
+		$('#layerlist tr.layer').removeClass("layersel");
+		$('#layerlist tr.layer:first').addClass("layersel");
 	});
 	
 	$('#layer_delete').click(function() {
@@ -1113,39 +1113,40 @@ function svg_edit_setup() {
 			// This matches what SvgCanvas does
 			// TODO: make this behavior less brittle (svg-editor should get which
 			// layer is selected from the canvas and then select that one in the UI)
-			$('#layerlist option:first').attr("selected", "selected");
+			$('#layerlist tr.layer').removeClass("layersel");
+			$('#layerlist tr.layer:first').addClass("layersel");
 		}
 	});
 	
 	$('#layer_up').click(function() {
 		// find index position of selected option
-		var curIndex = $('#layerlist option:selected').prevAll().length;
+		var curIndex = $('#layerlist tr.layersel').prevAll().length;
 		if (curIndex > 0) {
-			var total = $('#layerlist option').length;
+			var total = $('#layerlist tr.layer').length;
 			curIndex--;
 			svgCanvas.setCurrentLayerPosition(total-curIndex-1);
 			populateLayers();
-			$('#layerlist option').removeAttr("selected");
-			$('#layerlist option:eq('+curIndex+')').attr("selected", "selected");
+			$('#layerlist tr.layer').removeClass("layersel");
+			$('#layerlist tr.layer:eq('+curIndex+')').addClass("layersel");
 		}
 	});
 
 	$('#layer_down').click(function() {
 		// find index position of selected option
-		var curIndex = $('#layerlist option:selected').prevAll().length;
-		var total = $('#layerlist option').length;
+		var curIndex = $('#layerlist tr.layersel').prevAll().length;
+		var total = $('#layerlist tr.layer').length;
 		if (curIndex < total-1) {
 			curIndex++;
 			svgCanvas.setCurrentLayerPosition(total-curIndex-1);
 			populateLayers();
-			$('#layerlist option').removeAttr("selected");
-			$('#layerlist option:eq('+curIndex+')').attr("selected", "selected");
+			$('#layerlist tr.layer').removeClass("layersel");
+			$('#layerlist tr.layer:eq('+curIndex+')').addClass("layersel");
 		}
 	});
 
 	$('#layer_rename').click(function() {
-		var curIndex = $('#layerlist option:selected').prevAll().length;
-		var oldName = $('#layerlist option:selected').attr("value");
+		var curIndex = $('#layerlist tr.layersel').prevAll().length;
+		var oldName = $('#layerlist tr.layersel td.layername').text();
 		var newName = prompt("Please enter the new layer name","");
 		if (!newName) return;
 		if (oldName == newName) {
@@ -1162,34 +1163,39 @@ function svg_edit_setup() {
 		
 		svgCanvas.renameCurrentLayer(newName);
 		populateLayers();
-		$('#layerlist option').removeAttr("selected");
-		$('#layerlist option:eq('+curIndex+')').attr("selected", "selected");
+		$('#layerlist tr.layer').removeClass("layersel");
+		$('#layerlist tr.layer:eq('+curIndex+')').addClass("layersel");
 	});
 
 	var populateLayers = function(){
-		$('#layerlist').empty();
+		var layerlist = $('#layerlist tbody');
+		layerlist.empty();
 		var layer = svgCanvas.getNumLayers();
 		// we get the layers in the reverse z-order (the layer rendered on top is listed first)
 		while (layer--) {
 			var name = svgCanvas.getLayer(layer);
-			$('#layerlist').append("<option value=\"" + name + "\">" + name + "</option>");
+			// contenteditable=\"true\"
+			layerlist.append("<tr class=\"layer\"><td class=\"layervis\"/><td class=\"layername\" >" + name + "</td></tr>");
 		}
 		// if we only have one layer, then always make sure that layer is selected
 		// (This is really only required upon first initialization)
-		if ($('#layerlist').size() == 1) {
-			$('#layerlist option:first').attr("selected", "selected");
+		if (layerlist.size() == 1) {
+			$('#layerlist tr:first').addClass("layersel");
 		}
-		$('#layerlist option').mouseup(function(evt){
-			$('#layerlist option').removeAttr("selected");
-			var option = $(this);
-			option.attr("selected", "selected");
-			svgCanvas.setCurrentLayer(option.attr("value"));
-		}).click(function(evt) {
-			var container = document.getElementById("layerlist");
-//			var mouse_x = evt.pageX - container.boxObject.x;
-//			var mouse_y = evt.pageY - container.boxObject.y;
-			// mouse_x, mouse_y contain the relative x,y position of the click
+		// handle selection of layer
+		$('#layerlist td.layername').click(function(evt){
+			$('#layerlist tr.layer').removeClass("layersel");
+			var row = $(this.parentNode);
+			row.addClass("layersel");
+			svgCanvas.setCurrentLayer(this.textContent);
 		});
+		
+		// if there were too few rows, let's add a few to make it not so lonely
+		var num = 5 - $('#layerlist tr.layer').size();
+		while (num-- > 0) {
+			// FIXME: there must a better way to do this
+			layerlist.append("<tr><td style=\"color:white\">_</td><td/></tr>");
+		}
 	};
 	populateLayers();