issue59, reduce html table usage in search-box

Signed-off-by: Andreas Unterkircher <unki@netshadow.at>

2 files changed, 53 insertions, 58 deletions

diff --git a/themes/default/stylesheet.css b/themes/default/stylesheet.css
index cfc6223..7eede84 100644
--- a/themes/default/stylesheet.css
+++ b/themes/default/stylesheet.css
@@ -45,14 +45,14 @@ table, tr, td {
    padding:                0px;
 }
 
-td.searchfor {
-   border-bottom:          solid 1px #000000;
+div.searchfor {
    padding-top:            10px;
-   padding-bottom:         10px;
    padding-right:          10px;
+   padding-bottom:          10px;
    line-height:            21px;
    font-size:              12px;
    vertical-align:         middle;
+   border-bottom:          solid 1px #000000;
 }
 
 .menu {
diff --git a/themes/default/templates/search.tpl b/themes/default/templates/search.tpl
index 420d6e2..2030bdc 100644
--- a/themes/default/templates/search.tpl
+++ b/themes/default/templates/search.tpl
@@ -1,62 +1,57 @@
-<table style="width: 100%;">
+<span style="vertical-align: middle; text-decoration: underline;">
+ <img src="resources/loupe.png" alt="loupe" />Search:
+</span>
+<form action="" onsubmit="startSearch(); return false;">
+<div class="searchfor">
+<table>
  <tr>
-  <td style="vertical-align: middle; text-decoration: underline;">
-   <img src="resources/loupe.png" alt="loupe" />Search:
+  <td>Tag:</td>
+  <td>
+   <input type="text" name="searchfor" value="{$searchfor}" size="15" />
   </td>
+  <td>
+   <input type="image" class="submit" src="resources/doit.png" alt="start search" title="start search" onclick="click(this);" />
+  </td>
+ </tr>
+ <tr>
+  <td>Date:</td>
+  <td style="white-space: nowrap;">
+   { if ! $date_search_enabled }
+    <input type="checkbox" class="checkbox" name="consider_date" value="Y" onclick="datesearch();">
+   { else }
+    <input type="checkbox" class="checkbox" name="consider_date" value="Y" onclick="datesearch();" checked="checked">
+   { /if }
+   consider date-range
+  </td>
+  <td>&nbsp;</td>
+ </tr>
+ <tr>
+  <td>&nbsp;</td>
+  <td>{$from_date} <a href="javascript:showCalendar('from');" onclick="click(this);"><img src="resources/date.png" id="frompic"/></a></td>
  </tr>
  <tr>
-  <td class="searchfor">
-   <table>
-    <form action="" onsubmit="startSearch(); return false;">
-    <tr>
-     <td>Tag:</td>
-     <td>
-      <input type="text" name="searchfor" value="{$searchfor}" size="15" />
-     </td>
-     <td>
-      <input type="image" class="submit" src="resources/doit.png" alt="start search" title="start search" onclick="click(this);" />
-     </td>
-    </tr>
-    <tr>
-     <td>Date:</td>
-     <td style="white-space: nowrap;">
-      { if ! $date_search_enabled }
-       <input type="checkbox" class="checkbox" name="consider_date" value="Y" onclick="datesearch();">
-      { else }
-       <input type="checkbox" class="checkbox" name="consider_date" value="Y" onclick="datesearch();" checked="checked">
-      { /if }
-      consider date-range
-     </td>
-    </tr>
-    <tr>
-     <td>&nbsp;</td>
-     <td>{$from_date} <a href="javascript:showCalendar('from');" onclick="click(this);"><img src="resources/date.png" id="frompic"/></a></td>
-    </tr>
-    <tr>
-     <td>&nbsp;</td>
-     <td>
-      {$to_date} <a href="javascript:showCalendar('to');" onclick="click(this);"><img src="resources/date.png" id="topic" /></a>
-     </td>
-     <td>
-      <input type="image" class="submit" src="resources/doit.png" alt="start search" title="start search" onclick="click(this);" />
-     </td>
-    </tr>
-    <tr>
-     <td>
-      Sort-Order:&nbsp;
-     </td>
-     <td>
-      <select name="sort_order" onchange="update_sort_order(this);">
-       { sort_select_list }
-      </select>
-     </td>
-     <td>
-      &nbsp;
-     </td>
-    </tr>
-    </form>
-   </table>
-   <div id='calendar'></div>
+  <td>&nbsp;</td>
+  <td>
+   {$to_date} <a href="javascript:showCalendar('to');" onclick="click(this);"><img src="resources/date.png" id="topic" /></a>
+  </td>
+  <td>
+   <input type="image" class="submit" src="resources/doit.png" alt="start search" title="start search" onclick="click(this);" />
+  </td>
+ </tr>
+ <tr>
+  <td>
+   Sort-Order:&nbsp;
+  </td>
+  <td>
+   <select name="sort_order" onchange="update_sort_order(this);">
+    { sort_select_list }
+   </select>
+  </td>
+  <td>
+   &nbsp;
   </td>
  </tr>
 </table>
+</div>
+</form>
+<div id='calendar'></div>