From 9b21ea9c95dea290a86353814fc50fca0d91a93c Mon Sep 17 00:00:00 2001
From: Jim Hague <jim.hague@acm.org>
Date: Fri, 22 Feb 2013 23:20:06 +0000
Subject: [PATCH] Give in to my inner OCD and make the tune list a DIV with
 CSS, not a table.

---
 dottes.html.footer    |  2 +-
 dottes.html.header    |  2 +-
 dottes.html.tuneindex | 13 +++++++++----
 web/css/dottes.css    | 35 ++++++++++++++++++++++++-----------
 4 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/dottes.html.footer b/dottes.html.footer
index b2a9c1d..2f323c1 100644
--- a/dottes.html.footer
+++ b/dottes.html.footer
@@ -1,4 +1,4 @@
-</table>
+</div>
 </div>
 </body>
 </html>
diff --git a/dottes.html.header b/dottes.html.header
index 6385c67..38fa6c4 100644
--- a/dottes.html.header
+++ b/dottes.html.header
@@ -37,4 +37,4 @@
 
     <div class="grid_12 dottes-body">
       <h1>The tunes</h1>
-      <table class="dottes-tune-table">
+      <div class="dottes-tune-list">
diff --git a/dottes.html.tuneindex b/dottes.html.tuneindex
index cb72fbc..0cbd262 100644
--- a/dottes.html.tuneindex
+++ b/dottes.html.tuneindex
@@ -1,4 +1,9 @@
-<tr>
-<td><a class="dottes-tune-link" href="@TUNE@.html">@TITLE@</a></td>
-<td><img class="dottes-tune-table-image" src="firstline-@TUNE@.png" alt="@TITLE@ first line"></td>
-</tr>
+<div class="dottes-tune-list-item">
+  <div class="dottes-tune-list-item-link">
+    <a class="dottes-tune-link" href="@TUNE@.html">@TITLE@</a>
+  </div>
+  <div class="dottes-tune-list-item-image">
+    <img class="dottes-tune-table-image" src="firstline-@TUNE@.png"
+         alt="@TITLE@ first line">
+  </div>
+</div>
diff --git a/web/css/dottes.css b/web/css/dottes.css
index 0e661a7..bad6cd8 100644
--- a/web/css/dottes.css
+++ b/web/css/dottes.css
@@ -126,17 +126,7 @@ a.dottes-tune-link
 {
     font-size: 20px;
     position: relative;
-    top: 10px;
-}
-
-table.dottes-tune-table
-{
-    margin: 10px;
-}
-
-table.dottes-tune-table td
-{
-    vertical-align: middle;
+    top: 12px;
 }
 
 ul.tune-type-list
@@ -168,3 +158,26 @@ ul.tune-data-list li
     display: inline;
     margin: 10px;
 }
+
+div.dottes-tune-list
+{
+    display: table;
+    margin: 10px;
+}
+
+div.dottes-tune-list-item
+{
+    display: table-row;
+}
+
+div.dottes-tune-list-item-link
+{
+    display: table-cell;
+    vertical-align: middle;
+}
+
+div.dottes-tune-list-item-image
+{
+    display: table-cell;
+    vertical-align: middle;
+}