Pure CSS layout working with FF. (at least for the webmail)

Trying to make it work with IE6+...

static/js/common.js

@@ -1,9 +1,9 @@
 window.addEvent('domready', function(){
     parse_menubar('topmenubar');
     parse_menubar('menubar');
-    SqueezeBox.assign($$('a.boxed'), {
+    /*SqueezeBox.assign($$('a.boxed'), {
         parse: 'rel',        
-    });
+    });*/
 });
 
 callbacks = {};
@@ -15,10 +15,10 @@ register_callback = function(name, callback) {
 current_anchor = null;
 
 check_anchor = function() {
-    if (current_anchor.serialized == document.location.hash) {
+    if (current_anchor.serialized == location.hash) {
         return;
     }
-    current_anchor.from_string(document.location.hash);
+    current_anchor.from_string(location.hash);
     if (!current_anchor.serialized) {
         query = current_anchor.deflocation;
     } else {
@@ -134,7 +134,7 @@ function HashWrapper(deflocation) {
 
 parse_menubar = function(id) {
     if ($(id)) {
-	$(id).getElements('li.dropdown').each( function( elem ){
+	$(id).getElements('li.dropdown').each(function( elem ){
 	    var list = elem.getElement('ul.links');
 	    var myFx = new Fx.Slide(list).hide();
 	    elem.addEvents({
@@ -206,6 +206,9 @@ setDivHeight = function(id, extrah, modulo) {
     if ($("navbar")) {
         contentsize -= $("navbar").getSize().y;
     }
+    if ($("thead")) {
+        contentsize -= $("thead").getSize().y;
+    }
     if (modulo) {
         contentsize -= contentsize % modulo;
     }

static/stylesheets/default.css

@@ -5,15 +5,35 @@ html, body {
     margin: 0;
     padding: 0;
     height: 100%;
+    overflow: hidden;
 }
 
-#topmenubar { 
-    width: 100%;
-    margin: 0 auto;
-    padding: 0;
-    background: #072342;
-    border-bottom: 2px solid #333;
+div#container {
+    height: auto !important;
+    height: 100%;
+    min-height: 100%;
+    position: relative;
+    background: white;
+}
+
+@media screen {
+    body > div#footer {
+        position: fixed;
+    }
+}
+
+div#topmenubar { 
+    position: fixed;
+    border-bottom: 5px solid #333;
     height: 30px;
+    bottom: auto;
+}
+
+div#footer {
+    position: absolute;
+    height: 30px;
+    bottom: 0px;
+    border-top: 5px solid #333;
 }
 
 #menubar {
@@ -45,14 +65,19 @@ html, body {
 }
 
 #page {
-    border: 2px solid #333;
-    background: white;
-    margin: 0 15px;
+    width: 100%;
+    top: 35px;
+    bottom: 35px;
+    position: absolute;
 }
 
 #content {
+    position: fixed;
     overflow: auto;
     padding: 5px;
+    top: 130px;
+    bottom: 35px;
+    width: 100%;
 }
 
 #header {
@@ -101,6 +126,13 @@ html, body {
     width: 300px;
 }
 
+.uibar {
+    background: #153F65;
+    padding: 0;
+    margin: 0 auto;
+    width: 100%;
+}
+
 .menubar a, .menubar a:visited {
     text-decoration: none;
 }
@@ -138,7 +170,7 @@ html, body {
 }
 
 .left {
-    text-align: left;
+    float: left;
 }
 
 .right {
@@ -198,12 +230,12 @@ html, body {
 }
 
 table {
-    margin: 0 auto;
+    /*margin: 0 auto;*/
     width: 100%;
     border-collapse: collapse;
-    /*border-spacing: 20px;*/
 }
 
+
 tr.odd {
     background: white;
 }