Normalize grid rendering across firefox and chrome

lib/riemann/dash/public/views/grid.js

@@ -134,7 +134,7 @@
       row.find('th').text(host);
       this.services.forEach(function(service) {
         var event = this.events[host][service];
-        var element = $('<td><span class="metric" /><div class="bar" /></td>');
+        var element = $('<td><span class="bar"><span class="metric"/></span></td>');
         this.renderElement(element, event);
         row.append(element);
       }, this);

lib/riemann/dash/views/css.scss

@@ -148,7 +148,8 @@ html,table {
   top: 0;
   bottom: 0;
   height: 100%;
-  background: rgba(0, 0, 0, 0.3);
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
 }
 
 .state.ok, .bar.ok {
@@ -332,41 +333,44 @@ h2 {
     bottom: 0;
   }
 
+  .bar {
+    position: static;
+    display: block;
+    height: 100%;    
+  }
+
+  .box {
+    margin: 0;
+    padding: 0;
+    position: static;
+
+    .metric {
+      padding: 3px;
+      font-weight: normal;
+    }
+  }
+
   table {
+    font-size: 12px;
     position: absolute;
     width: 100%;
-    height: 100%;
     border-spacing: 3px;
 
-    tr > *:first-child {
-      width: 1px;
-    }
-
-    th {
-      font-weight: normal;
-      vertical-align: top;
-      text-align: right;
-      padding: 0 3px;
-    }
-
     thead {
       margin: 0;
       padding: 0;
 
-      tr {
-        padding: 0;
-      }
-
       th {
-        margin: 0;
+        // Work around https://bugs.webkit.org/show_bug.cgi?id=20040
+        position: relative;
+        top: 3px;
         vertical-align: bottom;
+        text-align: right;
       }
     }
-
-    .box {
-      position: relative;
-      vertical-align: top;
-      text-align: right;
-    }
+  }
+  
+  tr > *:first-child {
+    width: 1px;
   }
 }