make sure chat sticks to the bottom of the chat window to prevent moving when loading

code/chat.js

@@ -27,7 +27,7 @@ window.chat.clear = function() {
   window.chat._newFactionTimestamp = -1;
   window.chat._oldPublicTimestamp = -1;
   window.chat._newPublicTimestamp = -1;
-  $('#chatfaction, #chatpublic, #chatautomated').data('ignoreNextScroll', true).html('');
+  $('#chatfaction, #chatpublic, #chatautomated').data('ignoreNextScroll', true).html('<div></div>');
 }
 
 window.chat.clearIfRequired = function() {
@@ -332,7 +332,7 @@ window.chat.renderAutomatedMsgsTo = function() {
     return val;
   }).join('\n');
 
-  $('#chatautomated').html(msgs);
+  $('#chatautomated').html('<div>'+msgs+'</div>');
 }
 
 
@@ -382,7 +382,7 @@ window.chat.renderPlayerMsgsTo = function(isFaction, data, isOldMsgs, dupCheckAr
     prevTime = nowTime;
   });
 
-  var addTo = isFaction ? $('#chatfaction') : $('#chatpublic');
+  var addTo = isFaction ? $('#chatfaction > div') : $('#chatpublic > div');
 
   // if there is a change of day between two requests, handle the
   // divider insertion here.

main.js

@@ -50,8 +50,8 @@ document.getElementsByTagName('body')[0].innerHTML = ''
   + '  <a>expand</a><a>automated</a><a>public</a><a class="active">faction</a>'
   + '</div>'
   + '<div id="chat" style="display:none">'
-  + '  <div id="chatfaction"></div>'
-  + '  <div id="chatpublic"></div>'
+  + '  <div id="chatfaction"><div></div></div>'
+  + '  <div id="chatpublic"><div></div></div>'
   + '  <div id="chatautomated"></div>'
   + '</div>'
   + '<form id="chatinput" style="display:none"><time></time><span>tell faction:</span><input type="text"/></form>'

style.css

@@ -130,8 +130,17 @@ a:hover {
   height: -webkit-calc(100% - 4px);
   height: -moz-calc(100% - 4px);
   padding: 2px;
+  position:relative;
 }
 
+/* make text stick to the bottom */
+#chat > div > div {
+  position: absolute;
+  bottom:0;
+  left:2px;
+}
+
+
 #chat p {
   display: block;
   padding: 1px 2px;