clean up CSS and make it more IE6 friendly

css/editor.css

@@ -1,116 +1,45 @@
 .editor {
   position: absolute;
-  border: 2px solid rgb(159, 159, 159);
   overflow: hidden;
 }
 
-.editor.focus {
-  border: 2px solid #327fbd;;
-}
-
 .scroller {
   position: absolute;
-  left: 50px;
-  right: 0;
-  bottom: 0;
-  top: 0;
   overflow-x: scroll;
   overflow-y: hidden;	    
 }
 
 .gutter {
   position: absolute;
-  width: 50px;
-  top: 0px;
-  bottom: 0px;
   overflow-x: scroll;
   overflow-y: hidden;
-  
-  background: rgb(227, 227, 227);
-  border-right: 1px solid rgb(159, 159, 159);	 
-  color: rgb(136, 136, 136);
-  font-family: Monaco, "Courier New";
-  font-size: 12px;  
-  
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
 }
 
 .layer {
   position: absolute;
   overflow: hidden;  
   white-space: nowrap;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-.gutter-layer {
-  right: 0;
-  text-align: right;
-  padding-right: 10px;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
 }
 
 .text-layer {
   z-index: 2;
   font-family: Monaco, "Courier New", monospace;
-  font-size: 12px;
   cursor: text;
 }
 
+.cursor-layer {
+  z-index: 3;
+}
+
 .cursor {
   z-index: 3;
   position: absolute;
-  width: 2px;
-  background: black;
 }
 
 .line {
   white-space: nowrap;
 }
 
-.line .keyword {
-  color: blue;
-}
-
-.line .buildin-constant {
-  color: rgb(88, 72, 246);
-}
-
-.line .library-constant {
-  color: rgb(6, 150, 14);
-}
-
-.line .buildin-function {
-  color: rgb(60, 76, 114);
-}
-
-.line .string {
-  color: rgb(3, 106, 7);
-}
-
-.line .comment {
-  font-style: italic;
-  color: rgb(76, 136, 107);
-}
-
-.line .doc-comment {
-  color: rgb(0, 102, 255);
-}
-
-.line .doc-comment-tag {
-  color: rgb(128, 159, 191);
-}
-
-.line .number {
-  color: rgb(0, 0, 205);
-}
-
-.line .xml_pe {
-  color: rgb(104, 104, 91);
-}
-
 .marker-layer {
 	z-index: 1;
 }
@@ -118,18 +47,14 @@
 .marker-layer .selection {
   position: absolute;
   z-index: 2;
-  background: rgb(181, 213, 255);
 }
 
 .marker-layer .bracket {
   position: absolute;
   z-index: 3;
-  margin: -1px 0 0 -1px;
-  border: 1px solid rgb(192, 192, 192);
 }
 
 .marker-layer .active_line {
   position: absolute;
   z-index: 1;
-  background: rgb(232, 242, 254);
 }

css/tm.css

@@ -0,0 +1,86 @@
+.editor {
+  border: 2px solid rgb(159, 159, 159);
+}
+
+.editor.focus {
+  border: 2px solid #327fbd;;
+}
+
+.gutter {
+  width: 40px;
+  background: rgb(227, 227, 227);
+  border-right: 1px solid rgb(159, 159, 159);	 
+  color: rgb(136, 136, 136);
+  font-family: Monaco, "Courier New";
+  font-size: 12px;  
+}
+
+.gutter-layer {
+  right: 10px;
+  text-align: right;
+}
+
+.text-layer {
+  font-family: Monaco, "Courier New", monospace;
+  font-size: 12px;
+  cursor: text;
+}
+
+.cursor {
+  width: 2px;
+  background: black;
+}
+
+.line .keyword {
+  color: blue;
+}
+
+.line .buildin-constant {
+  color: rgb(88, 72, 246);
+}
+
+.line .library-constant {
+  color: rgb(6, 150, 14);
+}
+
+.line .buildin-function {
+  color: rgb(60, 76, 114);
+}
+
+.line .string {
+  color: rgb(3, 106, 7);
+}
+
+.line .comment {
+  font-style: italic;
+  color: rgb(76, 136, 107);
+}
+
+.line .doc-comment {
+  color: rgb(0, 102, 255);
+}
+
+.line .doc-comment-tag {
+  color: rgb(128, 159, 191);
+}
+
+.line .number {
+  color: rgb(0, 0, 205);
+}
+
+.line .xml_pe {
+  color: rgb(104, 104, 91);
+}
+
+.marker-layer .selection {
+  background: rgb(181, 213, 255);
+}
+
+.marker-layer .bracket {
+  margin: -1px 0 0 -1px;
+  border: 1px solid rgb(192, 192, 192);
+}
+
+.marker-layer .active_line {
+  background: rgb(232, 242, 254);
+}

demo/editor.html

@@ -9,16 +9,20 @@
 	
 	<style type="text/css" media="screen">
 	
+	html {
+		height: 100%;
+	}
+	
 	body {
 		margin: 0;
 		padding: 0;
 		font: sans-serif;
+		height: 100%;
+		width: 100%;
 	}
 	
 	#container {  
 	  	top: 30px;
-	  	right: 0px;
-	  	bottom: 0px;
 	  	left: 0px;
 	}
 	
@@ -31,6 +35,7 @@
   
 	</style>
 	<link rel="stylesheet" href="../css/editor.css" type="text/css" charset="utf-8">
+	<link rel="stylesheet" href="../css/tm.css" type="text/css" charset="utf-8">
 	
 	<script src="../src/ace.js" type="text/javascript" charset="utf-8"></script>
 	<script src="../src/mode/Text.js" type="text/javascript" charset="utf-8"></script>
@@ -124,10 +129,15 @@ var editor = new ace.Editor(
     getMode()
 );
 
-window.onresize = function() {
-  editor.resize();
+function onResize() {
+    container.style.width = (document.documentElement.clientWidth - 4) + "px";
+    container.style.height = (document.documentElement.clientHeight - 30 - 4) + "px";     
+	editor.resize();    
 };
 
+window.onresize = onResize;
+onResize();
+
 ace.addListener(container, "dragover", function(e) {
   return ace.preventDefault(e);
 });

src/Editor.js

@@ -82,10 +82,8 @@ ace.Editor.prototype.setMode = function(mode) {
 };
 
 
-ace.Editor.prototype.resize = function()
-{
-    this.renderer.scrollToY(this.renderer.getScrollTop());
-    this.renderer.draw();
+ace.Editor.prototype.resize = function() {
+    this.renderer.onResize();
 };
 
 ace.Editor.prototype._highlightBrackets = function() {
@@ -190,7 +188,10 @@ ace.Editor.prototype.onSelectionChange = function() {
 ace.Editor.prototype.onMouseDown = function(e) {
     this.textInput.focus();
 
-    var pos = this.renderer.screenToTextCoordinates(e.pageX, e.pageY);
+    var pageX = ace.getDocumentX(e);
+    var pageY = ace.getDocumentY(e);
+
+    var pos = this.renderer.screenToTextCoordinates(pageX, pageY);
     this.moveCursorToPosition(pos);
     this.selection.setSelectionAnchor(pos.row, pos.column);
     this.renderer.scrollCursorIntoView();
@@ -199,8 +200,8 @@ ace.Editor.prototype.onMouseDown = function(e) {
     var mousePageX, mousePageY;
 
     var onMouseSelection = function(e) {
-        mousePageX = e.pageX;
-        mousePageY = e.pageY;
+        mousePageX = ace.getDocumentX(e);
+        mousePageY = ace.getDocumentY(e);
     };
 
     var onMouseSelectionEnd = function() {

src/VirtualRenderer.js

@@ -31,6 +31,8 @@ ace.VirtualRenderer = function(container) {
         row : 0,
         column : 0
     };
+
+    this.onResize();
 };
 
 ace.VirtualRenderer.prototype.setDocument = function(doc) {
@@ -56,6 +58,22 @@ ace.VirtualRenderer.prototype.getLastVisibleRow = function() {
     return this.layerConfig.lastRow || 0;
 };
 
+ace.VirtualRenderer.prototype.onResize = function()
+{
+    var height = ace.getInnerHeight(this.container);
+    this.gutter.style.height = height + "px";
+    this.scroller.style.height = height + "px";
+
+    var width = ace.getInnerWidth(this.container);
+    var gutterWidth = this.gutter.offsetWidth;
+    this.scroller.style.left = gutterWidth + "px";
+    this.scroller.style.width = Math.max(0, width - gutterWidth) + "px";
+
+    if (this.doc) {
+        this.scrollToY(this.getScrollTop());
+    }
+};
+
 ace.VirtualRenderer.prototype.updateLines = function(firstRow, lastRow) {
     var layerConfig = this.layerConfig;