Web UI: Cosmetic improvements to preferences

2025-01-23 13:04:23 +00:00 · 2011-10-02 12:35:27 +03:00 · 2011-10-02 12:35:27 +03:00 · c39244aeb6
commit c39244aeb6
parent 8f22279428
4 changed files with 220 additions and 182 deletions
--- a/src/webui/css/style.css
+++ b/src/webui/css/style.css
@ -1,8 +1,8 @@
 /* Reset */

-ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,object,iframe { margin: 0; padding: 0; }
+/*ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,object,iframe { margin: 0; padding: 0; }*/
 a img,:link img,:visited img { border: none; }
-table { border-collapse: collapse; border-spacing: 0; }
+/*table { border-collapse: collapse; border-spacing: 0; }*/
 :focus { outline: none; }

 /* Structure */
@ -294,11 +294,46 @@ fieldset.settings {
 	border-radius: 8px;
 	-webkit-border-radius: 8px;
 	-moz-border-radius: 8px;
-	padding: 4px;
+	padding: 4px 4px 4px 10px;
 }

 fieldset.settings legend {
-        margin-left: 8px;
+  margin-left: 8px;
 	padding: 4px;
-        font-weight: bold;
+  font-weight: bold;
 }
+
+fieldset.settings label {
+  padding: 2px;
+}
+
+fieldset.settings .leftLabelSmall {
+  width: 5em;
+  float: left;
+  text-align: right;
+  margin-right: 0.5em;
+  display: block;
+}
+
+fieldset.settings .leftLabelLarge {
+  width: 14em;
+  float: left;
+  text-align: right;
+  margin-right: 0.5em;
+  display: block;
+}
+
+div.formRow {
+  clear: left;
+  display: block;
+}
+
+ul.filterList {
+  margin: 0 0 0 16px;
+  padding-left: 0;
+}
+
+ul.filterList li {
+  padding-top: 2px
+}
+
--- a/src/webui/html/filters.html
+++ b/src/webui/html/filters.html
@ -1,4 +1,4 @@
-				<ul>
+				<ul class="filterList">
 					<li id="all_filter"><a href="#" onclick="setFilter('all');"><img src="images/skin/filterall.png"/>_(All)</a></li>
 					<li id="downloading_filter"><a href="#" onclick="setFilter('downloading');"><img src="images/skin/downloading.png"/>_(Downloading)</a></li>
 					<li id="completed_filter"><a href="#" onclick="setFilter('completed');"><img src="images/skin/uploading.png"/>_(Completed)</a></li>
--- a/src/webui/html/preferences_content.html
+++ b/src/webui/html/preferences_content.html
@ -1,174 +1,177 @@
 <div id="ConnectionTab" class="PrefTab">
 <fieldset class="settings">
  <legend>_(Listening Port)</legend>
-  <div style="padding-left: 30px;">
-  _(Port used for incoming connections:)
-  <input type="text" id="port_value" style="width: 4em;"/>
-  <br/>
-  <table>
-  <tr>
-  <td style="vertical-align: bottom;"><input type="checkbox" id="upnp_checkbox" style="margin-bottom: -2px;"/></td><td>_(Use UPnP / NAT-PMP port forwarding from my router)</td>
-  </tr>
-  </table>
-  </div>
+  <label for="port_value">_(Port used for incoming connections:)</label>
+  <input type="text" id="port_value" style="width: 4em;"/><br/>
+  <input type="checkbox" id="upnp_checkbox"/>
+  <label for="upnp_checkbox">_(Use UPnP / NAT-PMP port forwarding from my router)</label>
 </fieldset>
 <fieldset class="settings">
  <legend>_(Connections Limits)</legend>
-  <div style="padding-left: 30px;">
  <table>
  <tr>
-  <td style="vertical-align: bottom;"><input type="checkbox" id="max_connec_checkbox" onClick="updateMaxConnecEnabled();"/></td><td style="padding-right: 3px;">_(Global maximum number of connections:)</td><td><input type="text" id="max_connec_value" style="width: 4em;"/></td>
+  <td>
+    <input type="checkbox" id="max_connec_checkbox" onClick="updateMaxConnecEnabled();"/>
+    <label for="max_connec_checkbox">_(Global maximum number of connections:)</label>
+  </td>
+  <td><input type="text" id="max_connec_value" style="width: 4em;"/></td>
  </tr>
  <tr>
-  <td style="vertical-align: bottom;"><input type="checkbox" id="max_connec_per_torrent_checkbox" onClick="updateMaxConnecPerTorrentEnabled();" style="margin-bottom: -2px;"/></td><td style="padding-right: 3px;">_(Maximum number of connections per torrent:)</td><td><input type="text" id="max_connec_per_torrent_value" style="width: 4em;"/></td>
+  <td>
+    <input type="checkbox" id="max_connec_per_torrent_checkbox" onClick="updateMaxConnecPerTorrentEnabled();"/>
+    <label for="max_connec_per_torrent_checkbox">_(Maximum number of connections per torrent:)</label>
+  </td>
+  <td><input type="text" id="max_connec_per_torrent_value" style="width: 4em;"/></td>
  </tr>
  <tr>
-  <td style="vertical-align: bottom;"><input type="checkbox" id="max_uploads_per_torrent_checkbox" onClick="updateMaxUploadsPerTorrentEnabled();" style="margin-bottom: -2px;"/></td><td style="padding-right: 3px;">_(Maximum number of upload slots per torrent:)</td><td><input type="text" id="max_uploads_per_torrent_value" style="width: 4em;"/></td>
+  <td>
+    <input type="checkbox" id="max_uploads_per_torrent_checkbox" onClick="updateMaxUploadsPerTorrentEnabled();"/>
+    <label for="max_uploads_per_torrent_checkbox">_(Maximum number of upload slots per torrent:)</label>
+  </td>
+  <td><input type="text" id="max_uploads_per_torrent_value" style="width: 4em;"/></td>
  </tr>
  </table>
-  </div>
 </fieldset>
 <fieldset class="settings">
  <legend>_(Global Rate Limits)</legend>
-  <div style="padding-left: 30px;">
  <table>
  <tr>
-  <td style="vertical-align: bottom;"><input type="checkbox" id="up_limit_checkbox" onClick="updateUpLimitEnabled();"/></td><td style="padding-right: 3px;">_(Upload:)</td><td><input type="text" id="up_limit_value" style="width: 4em;"/>&nbsp;&nbsp;_(KiB/s)</td>
+  <td>
+    <input type="checkbox" id="up_limit_checkbox" onClick="updateUpLimitEnabled();"/>
+    <label for ="up_limit_checkbox">_(Upload:)</label>
+  </td>
+  <td><input type="text" id="up_limit_value" style="width: 4em;"/>&nbsp;&nbsp;_(KiB/s)</td>
  </tr>
  <tr>
-  <td style="vertical-align: bottom;"><input type="checkbox" id="dl_limit_checkbox" onClick="updateDlLimitEnabled();"/></td><td style="padding-right: 3px;">_(Download:)</td><td><input type="text" id="dl_limit_value" style="width: 4em;"/>&nbsp;&nbsp;_(KiB/s)</td>
+  <td>
+    <input type="checkbox" id="dl_limit_checkbox" onClick="updateDlLimitEnabled();"/>
+    <label for="dl_limit_checkbox">_(Download:)</label>
+  </td>
+  <td><input type="text" id="dl_limit_value" style="width: 4em;"/>&nbsp;&nbsp;_(KiB/s)</td>
  </tr>
  </table>
  <fieldset class="settings">
  <legend>_(Options)</legend>
-  <input type="checkbox" id="enable_utp_checkbox"/>&nbsp;&nbsp;_(Enable bandwidth management (uTP))<br/>
-  <input type="checkbox" id="limit_utp_rate_checkbox"/>&nbsp;&nbsp;_(Apply rate limit to uTP connections)<br/>
-  <input type="checkbox" id="limit_tcp_overhead_checkbox"/>&nbsp;&nbsp;_(Apply rate limit to transport overhead)<br/>
+  <input type="checkbox" id="enable_utp_checkbox"/>
+  <label for="enable_utp_checkbox">_(Enable bandwidth management (uTP))</label><br/>
+  <input type="checkbox" id="limit_utp_rate_checkbox"/>
+  <label for="limit_utp_rate_checkbox">_(Apply rate limit to uTP connections)</label><br/>
+  <input type="checkbox" id="limit_tcp_overhead_checkbox"/>
+  <label for="limit_tcp_overhead_checkbox">_(Apply rate limit to transport overhead)</label><br/>
  </fieldset>
-  </div>
 </fieldset>
 </div>

 <div id="BittorrentTab" class="PrefTab invisible">
 <fieldset class="settings">
  <legend>_(Privacy)</legend>
-  <div style="padding-left: 30px;">
-  <table>
-  <tr>
-  <td style="vertical-align: bottom; text-align: right;"><input type="checkbox" id="dht_checkbox"/></td><td>_(Enable DHT (decentralized network) to find more peers)</td>
-  </tr>
-  <tr>
-  <td style="vertical-align: bottom; text-align: right;"><input type="checkbox" id="DHTPortDiffThanBT_checkbox" onclick="updateDHTPortSettings();"/></td><td>_(Use a different port for DHT and BitTorrent)</td>
-  </tr>
-  <tr>
-  <td style="vertical-align: bottom; text-align: right;">_(DHT port:)</td><td><input type="text" id="DHTPort_txt" value="6881"/></td>
-  </tr>
-  <tr>
-  <td style="vertical-align: bottom; text-align: right;"><input type="checkbox" id="pex_checkbox"/></td><td>_(Enable Peer Exchange (PeX) to find more peers)</td>
-  </tr>
-  <tr>
-  <td style="vertical-align: bottom; text-align: right;"><input type="checkbox" id="lsd_checkbox"/></td><td>_(Enable Local Peer Discovery to find more peers)</td>
-  </tr>
-  </table>
-  _(Encryption mode:)
+  <input type="checkbox" id="dht_checkbox"/>
+  <label for="dht_checkbox">_(Enable DHT (decentralized network) to find more peers)</label><br/>
+  <input type="checkbox" id="DHTPortDiffThanBT_checkbox" onclick="updateDHTPortSettings();"/>
+  <label for="DHTPortDiffThanBT_checkbox">_(Use a different port for DHT and BitTorrent)</label><br/>
+  <label for="DHTPort_txt" style="margin-left: 20px;">_(DHT port:)</label>
+  <input type="text" id="DHTPort_txt" value="6881"/><br/>
+  <input type="checkbox" id="pex_checkbox"/>
+  <label for="pex_checkbox">_(Enable Peer Exchange (PeX) to find more peers)</label><br/>
+  <input type="checkbox" id="lsd_checkbox"/>
+  <label for="lsd_checkbox">_(Enable Local Peer Discovery to find more peers)</label><br/>
+
+  <label for="encryption_select">_(Encryption mode:)</label>
  <select id="encryption_select">
    <option value="0">_(Prefer encryption)</option>
    <option value="1">_(Require encryption)</option>
    <option value="2">_(Disable encryption)</option>
  </select><br/>
-  <input type="checkbox" id="anonymous_mode_checkbox" onClick="toggleAnonymousMode()"/>&nbsp;&nbsp;_(Enable anonymous mode) (<a href="http://sourceforge.net/apps/mediawiki/qbittorrent/index.php?title=Anonymous_mode">More information</a>)<br/>
-  </div>
+  <input type="checkbox" id="anonymous_mode_checkbox" onClick="toggleAnonymousMode()"/>
+  <label for="anonymous_mode_checkbox">_(Enable anonymous mode) (<a href="http://sourceforge.net/apps/mediawiki/qbittorrent/index.php?title=Anonymous_mode">More information</a>)</label><br/>
 </fieldset>
 </div>

 <div id="DownloadsTab" class="PrefTab invisible">
  <fieldset class="settings">
  <legend>_(Hard Disk)</legend>
-  <div style="padding-left: 30px;">
-  <table>
-  <tr>
-  <td style="vertical-align: bottom; text-align: right;">_(Save files to location:)</td><td><input type="text" id="savepath_text"/></td>
-  </tr>
-  <tr>
-  <td style="vertical-align: bottom; text-align: right;"><input type="checkbox" id="temppath_checkbox" onclick="updateTempDirEnabled();"/></td><td>_(Keep incomplete torrents in:)</td>
-  </tr>
-  <tr>
-  <td style="vertical-align: bottom; text-align: right;"></td><td><input type="text" id="temppath_text"/></td>
-  </tr>
-  <tr><td colspan="2">_(Automatically add torrents from:)</td></tr>
-  <tr>
-  <td></td>
-  <td>
-    <table style="text-align: center" border="1" id="watched_folders_tab">
+  <div class="formRow">
+  <label for="savepath_text" class="leftLabelLarge">_(Save files to location:)</label>
+  <input type="text" id="savepath_text"/>
+  </div>
+  <div class="formRow">
+  <input type="checkbox" id="temppath_checkbox" onclick="updateTempDirEnabled();"/>
+  <label for="temppath_checkbox">_(Keep incomplete torrents in:)</label>
+  <input type="text" id="temppath_text"/>
+  </div>
+  <br/>
+  _(Automatically add torrents from:)<br/>
+    <table border="1" id="watched_folders_tab">
    <thead><tr><th>_(Watched Folder)</th><th>_(Download here)</th></tr></thead>
    <tbody></tbody>
    <tfoot><tr><td style="padding-top:4px;"><input type="text" id="new_watch_folder_txt"/></td><td style="padding-top:4px;"><input type="checkbox" id="new_watch_folder_dl" style="padding-left:18px;"/><img src="theme/list-add" alt="Add" style="padding-left:2px;width:16px;cursor:pointer;margin-right:-18px;" onclick="javascript:addWatchFolder();"/></td></tr></tfoot>
-    </table>
-  </td>
-  </tr>
-  <tr>
-  <td style="vertical-align: bottom; text-align: right;"><input type="checkbox" id="exportdir_checkbox" onclick="updateExportDirEnabled();"/></td><td>_(Copy .torrent files to:)</td>
-  </tr>
-  <tr>
-  <td style="vertical-align: bottom; text-align: right;"></td><td><input type="text" id="exportdir_text"/></td>
-  </tr>
-  <tr id="appendexttr">
-  <td style="vertical-align: bottom; text-align: right;"><input type="checkbox" id="appendext_checkbox"/></td><td>_(Append .!qB extension to incomplete files)</td>
-  </tr>
-  <tr>
-  <td style="vertical-align: bottom; text-align: right;"><input type="checkbox" id="preallocateall_checkbox"/></td><td>_(Pre-allocate disk space for all files)</td>
-  </tr>
-  </table>
-  </div>
+    </table><br/>
+
+  <input type="checkbox" id="exportdir_checkbox" onclick="updateExportDirEnabled();"/>
+  <label for="exportdir_checkbox">_(Copy .torrent files to:)</label>&nbsp;&nbsp;
+  <input type="text" id="exportdir_text"/><br/>
+  <span id="appendexttr">
+  <input type="checkbox" id="appendext_checkbox"/>
+  <label for="appendext_checkbox">_(Append .!qB extension to incomplete files)</label><br/>
+  </span>
+  
+  <input type="checkbox" id="preallocateall_checkbox"/>
+  <label for="preallocateall_checkbox">_(Pre-allocate disk space for all files)</label><br/>
 </fieldset>
+
 <fieldset class="settings">
  <legend>_(Email notification upon download completion)</legend>
-<div style="padding-left: 30px;">
- <input type="checkbox" id="mail_notification_checkbox" onclick="updateMailNotification();"/> _(Email notification upon download completion)
-  <table>
-  <tr>
-  <td style="vertical-align: bottom; text-align: right;">_(Destination email:)</td><td><input type="text" id="dest_email_txt"/></td>
-  </tr>
-  <tr>
-  <td style="vertical-align: bottom; text-align: right;">_(SMTP server:)</td><td><input type="text" id="smtp_server_txt"/></td>
-  </tr>
-  </table>
-  <input type="checkbox" id="mail_ssl_checkbox"/> _(This server requires a secure connection (SSL))<br/>
-  <input type="checkbox" id="mail_auth_checkbox" onclick="updateMailAuthSettings();" />&nbsp;&nbsp;_(Authentication)<br/>
-    <table>
-    <tr><td style="padding-left: 10px;">_(Username:)</td><td><input type="text" id="mail_username_text" /></td></tr>
-    <tr><td style="padding-left: 10px;">_(Password:)</td><td><input type="password" id="mail_password_text" /></td></tr>
-    </table>
-</div>
+  <input type="checkbox" id="mail_notification_checkbox" onclick="updateMailNotification();"/>
+  <label for="mail_notification_checkbox">_(Email notification upon download completion)</label><br/>
+  <div class="formRow">
+  <label for="dest_email_txt" class="leftLabelLarge">_(Destination email:)</label><input type="text" id="dest_email_txt"/>
+  </div>
+  <div class="formRow">
+  <label for="smtp_server_txt" class="leftLabelLarge">_(SMTP server:)</label><input type="text" id="smtp_server_txt"/>
+  </div>
+  <div class="formRow">
+  <input type="checkbox" id="mail_ssl_checkbox"/><label for="mail_ssl_checkbox">_(This server requires a secure connection (SSL))</label>
+  </div>
+  <input type="checkbox" id="mail_auth_checkbox" onclick="updateMailAuthSettings();"/><label for="mail_auth_checkbox">_(Authentication)</label><br/>
+    <div class="formRow">
+    <label for="mail_username_text" class="leftLabelLarge">_(Username:)</label><input type="text" id="mail_username_text"/>
+    </div>
+    <div class="formRow">
+    <label for="mail_password_text" class="leftLabelLarge">_(Password:)</label><input type="password" id="mail_password_text"/>
+    </div>
 </fieldset>
+
 <fieldset class="settings">
  <legend>_(Run an external program on torrent completion)</legend>
-<div style="padding-left: 30px;">
- <input type="checkbox" id="autorun_checkbox" onclick="updateAutoRun();"/> _(Run an external program on torrent completion)<br/>
+ <input type="checkbox" id="autorun_checkbox" onclick="updateAutoRun();"/>
+ <label for="autorun_checkbox">_(Run an external program on torrent completion)</label><br/>
 <input type="text" id="autorunProg_txt" style="width: 400px;"/><br/>
 <i>_(The following parameters are supported:)
 <ul>
 <li>%f: _(Torrent path)</li>
 <li>%n: _(Torrent name)</li>
 </ul></i>
-</div>
 </fieldset>
+
 <fieldset class="settings">
  <legend>_(Torrent Queueing)</legend>
-  <div style="padding-left: 30px;">
-  <input type="checkbox" id="queueing_checkbox" onclick="updateQueuingSystem();"/> _(Torrent Queueing)
-  <table>
-  <tr>
-  <td style="vertical-align: bottom; text-align: right;">_(Maximum active downloads:)</td><td><input type="text" id="max_active_dl_value" style="width: 4em;"/></td>
-  </tr>
-  <tr>
-  <td style="vertical-align: bottom; text-align: right;">_(Maximum active uploads:)</td><td><input type="text" id="max_active_up_value" style="width: 4em;"/></td>
-  </tr>
-  <tr>
-  <td style="vertical-align: bottom; text-align: right;">_(Maximum active torrents:)</td><td><input type="text" id="max_active_to_value" style="width: 4em;"/></td>
-  </tr>
-  </table>
-  <input type="checkbox" id="dont_count_slow_torrents_checkbox"/> _(Do not count slow torrents in these limits)
+  <input type="checkbox" id="queueing_checkbox" onclick="updateQueuingSystem();"/>
+  <label for="queueing_checkbox">_(Torrent Queueing)</label><br/>
+  <div class="formRow">
+  <label for="max_active_dl_value" style="margin-left: 20px;" class="leftLabelLarge">_(Maximum active downloads:)</label>
+  <input type="text" id="max_active_dl_value" style="width: 4em;"/>
+  </div>
+  <div class="formRow">
+  <label for="max_active_up_value" style="margin-left: 20px;" class="leftLabelLarge">_(Maximum active uploads:)</label>
+  <input type="text" id="max_active_up_value" style="width: 4em;"/>
+  </div>
+  <div class="formRow">
+  <label for="max_active_to_value" style="margin-left: 20px;" class="leftLabelLarge">_(Maximum active torrents:)</label>
+  <input type="text" id="max_active_to_value" style="width: 4em;"/>
+  </div>
+  <div class="formRow">
+  <input type="checkbox" id="dont_count_slow_torrents_checkbox"/>
+  <label for="dont_count_slow_torrents_checkbox">_(Do not count slow torrents in these limits)</label>
  </div>
 </fieldset>
 </div>
@ -176,47 +179,55 @@
 <div id="FilterTab" class="PrefTab invisible">
 <fieldset class="settings">
  <legend>_(IP Filtering)</legend>
-  <div style="padding-left: 30px;">
-  <input type="checkbox" id="ipfilter_enabled_checkbox" onclick="updateFilterSettings();"/> _(IP Filtering)
-  <table>
-  <tr>
-  <td style="vertical-align: bottom;">_(Filter path (.dat, .p2p, .p2b):)</td><td><input type="text" id="ipfilter_text"/></td>
-  </tr>
-  </table>
-  </div>
+  <input type="checkbox" id="ipfilter_enabled_checkbox" onclick="updateFilterSettings();"/>
+  <label for="ipfilter_enabled_checkbox">_(IP Filtering)</label><br/>
+  <label for="ipfilter_text">_(Filter path (.dat, .p2p, .p2b):)</label>
+  <input type="text" id="ipfilter_text"/>
 </fieldset>
 </div>

 <div id="ProxyTab" class="PrefTab invisible">
 <fieldset class="settings">
  <legend>_(Proxy Server)</legend>
-  <div style="padding-left: 30px;">
-    _(Type:) <select id ="peer_proxy_type_select" onchange="updatePeerProxySettings();">
+    <div class="formRow">
+    <label for="peer_proxy_type_select" class="leftLabelSmall">_(Type:)</label>
+    <select id ="peer_proxy_type_select" onchange="updatePeerProxySettings();">
      <option value="none">_((None))</option>
      <option value="socks4">_(SOCKS4)</option>
      <option value="socks5">_(SOCKS5)</option>
      <option value="http">_(HTTP)</option>
-    </select>&nbsp;&nbsp;&nbsp;&nbsp;
-    _(Host:) <input type="text" id="peer_proxy_host_text" />&nbsp;&nbsp;&nbsp;&nbsp;
-    _(Port:) <input type="text" id="peer_proxy_port_value" style="width: 4em;"/><br/>
-    <input type="checkbox" id="use_peer_proxy_checkbox" />&nbsp;&nbsp;_(Use proxy for peer connections)<br/><br/>
-    <input type="checkbox" id="peer_proxy_auth_checkbox" onclick="updatePeerProxyAuthSettings();" />&nbsp;&nbsp;_(Authentication)<br/>
-    <table>
-    <tr><td style="padding-left: 10px;">_(Username:)</td><td><input type="text" id="peer_proxy_username_text" /></td></tr>
-    <tr><td style="padding-left: 10px;">_(Password:)</td><td><input type="password" id="peer_proxy_password_text" /></td></tr>
-    </table>
-  </div>
+    </select>
+    </div>
+    <div class="formRow">
+    <label for="peer_proxy_host_text" class="leftLabelSmall">_(Host:)</label>
+    <input type="text" id="peer_proxy_host_text" />
+    </div>
+    <div class="formRow">
+    <label for="peer_proxy_port_value" class="leftLabelSmall">_(Port:)</label>
+    <input type="text" id="peer_proxy_port_value" style="width: 4em;"/>
+    </div>
+    <div class="formRow">
+    <input type="checkbox" id="use_peer_proxy_checkbox"/>
+    <label for="use_peer_proxy_checkbox">_(Use proxy for peer connections)</label>
+    </div>
+    <input type="checkbox" id="peer_proxy_auth_checkbox" onclick="updatePeerProxyAuthSettings();"/>
+    <label for="peer_proxy_auth_checkbox">_(Authentication)</label><br/>
+    
+    <div class="formRow">
+    <label for="peer_proxy_username_text" style="margin-left: 20px;" class="leftLabelSmall">_(Username:)</label>
+    <input type="text" id="peer_proxy_username_text" />
+    </div>
+    <div class="formRow">
+    <label for="peer_proxy_password_text" style="margin-left: 20px;" class="leftLabelSmall">_(Password:)</label>
+    <input type="password" id="peer_proxy_password_text" />
+    </div>
 </fieldset>
 </div>

 <div id="WebUITab" class="PrefTab invisible">
 <fieldset class="settings">
  <legend>_(Language)</legend>
-  <div style="padding-left: 30px;">
-  <table>
-  <tr>
-  <td style="vertical-align: bottom;">_(User Interface Language:)</td>
-  <td style="padding-right: 3px;">
+  <label for="locale_select">_(User Interface Language:)</label>
    <select id="locale_select">
      <option value="en_GB">English</option>
      <option value="fr_FR">Français</option>
@ -250,61 +261,54 @@
      <option value="zh_TW">中文 (繁體)</option>
      <option value="ko_KR">한글</option>
    </select>
-  </td>
-  </tr>
-  </table>
-  </div>
 </fieldset>

 <fieldset class="settings">
  <legend>_(HTTP Server)</legend>
-  <div style="padding-left: 30px;">
-  <table>
-  <tr>
-  <td style="vertical-align: bottom;">_(Port:)</td><td style="padding-right: 3px;"><input type="text" id="webui_port_value" style="width: 4em;"/></td>
-  </tr>
-  </table>
-  <input type="checkbox" id="use_https_checkbox" onclick="updateHttpsSettings();" />&nbsp;&nbsp;_(Use HTTPS instead of HTTP)<br/>
-  <table>
-  <tr><td style="padding-left: 10px;">_(Key:)</td><td><textarea id="ssl_key_textarea" rows="5" cols="70"></textarea></td></tr>
-  <tr><td style="padding-left: 10px;">_(Certificate:)</td><td><textarea id="ssl_cert_textarea" rows="5" cols="70"></textarea></td></tr>
-  </table>
-  <div style="padding-left: 10px;"><a href=http://httpd.apache.org/docs/2.1/ssl/ssl_faq.html#aboutcerts>Information about certificates</a></div>
+  <label for="webui_port_value">_(Port:)</label><input type="text" id="webui_port_value" style="width: 4em;"/><br/>
+
+  <input type="checkbox" id="use_https_checkbox" onclick="updateHttpsSettings();" />
+  <label for="use_https_checkbox">_(Use HTTPS instead of HTTP)</label><br/>
+  <div class="formRow">
+  <label for="ssl_key_textarea" style="margin-left: 20px;" class="leftLabelSmall">_(Key:)</label>
+  <textarea id="ssl_key_textarea" rows="5" cols="70"></textarea>
  </div>
+  <div class="formRow">
+  <label for="ssl_cert_textarea" style="margin-left: 20px;" class="leftLabelSmall">_(Certificate:)</label>
+  <textarea id="ssl_cert_textarea" rows="5" cols="70"></textarea>
+  </div>
+  <div style="padding-left: 10px;"><a href=http://httpd.apache.org/docs/2.1/ssl/ssl_faq.html#aboutcerts>Information about certificates</a></div>
 </fieldset>
+
 <fieldset class="settings">
  <legend>_(Authentication)</legend>
-  <div style="padding-left: 30px;">
-  <table>
-  <tr>
-  <td style="vertical-align: bottom;">_(Username:)</td><td style="padding-right: 3px;"><input type="text" id="webui_username_text" /></td>
-  </tr>
-  <tr>
-  <td style="vertical-align: bottom;">_(Password:)</td><td style="padding-right: 3px;"><input type="password" id="webui_password_text" /></td>
-  </tr>
-  </table>
-  <input type="checkbox" id="bypass_local_auth_checkbox" />&nbsp;&nbsp;_(Bypass authentication for localhost)
+  <div class="formRow">
+  <label for="webui_username_text" class="leftLabelSmall">_(Username:)</label><input type="text" id="webui_username_text" />
  </div>
+  <div class="formRow">
+  <label for="webui_password_text" class="leftLabelSmall">_(Password:)</label><input type="password" id="webui_password_text" />
+  </div>
+
+  <input type="checkbox" id="bypass_local_auth_checkbox" />
+  <label for="bypass_local_auth_checkbox">_(Bypass authentication for localhost)</label>
 </fieldset>
+
 <fieldset class="settings">
-  <legend><input type="checkbox" id="use_dyndns_checkbox" onclick="updateDynDnsSettings();" />&nbsp;&nbsp;_(Update my dynamic domain name)</legend>
-  <div style="padding-left: 30px;">
+  <legend><input type="checkbox" id="use_dyndns_checkbox" onclick="updateDynDnsSettings();" />
+  <label for="use_dyndns_checkbox">_(Update my dynamic domain name)</label></legend>
  <select id="dyndns_select">
    <option value="0">DynDNS</option>
    <option value="1">NO-IP</option>
  </select>
-  <input type="button" value="_(Register)" onclick="registerDynDns();"/><br/>
-  <table>
-    <tr>
-      <td style="vertical-align: bottom;">_(Domain name:)</td><td style="padding-right: 3px;"><input type="text" id="dyndns_domain_text" /></td>
-    </tr>
-    <tr>
-      <td style="vertical-align: bottom;">_(Username:)</td><td style="padding-right: 3px;"><input type="text" id="dyndns_username_text" /></td>
-    </tr>
-    <tr>
-      <td style="vertical-align: bottom;">_(Password:)</td><td style="padding-right: 3px;"><input type="password" id="dyndns_password_text" /></td>
-    </tr>
-  </table>
+  <input type="button" value="_(Register)" onclick="registerDynDns();"/><br/><br/>
+  <div class="formRow">
+  <label for="dyndns_domain_text" class="leftLabelSmall">_(Domain name:)</label><input type="text" id="dyndns_domain_text"/>
+  </div>
+  <div class="formRow">
+  <label for="dyndns_username_text" class="leftLabelSmall">_(Username:)</label><input type="text" id="dyndns_username_text"/>
+  </div>
+  <div class="formRow">
+  <label for="dyndns_password_text" class="leftLabelSmall">_(Password:)</label><input type="password" id="dyndns_password_text"/>
  </div>
 </fieldset>
 </div>
--- a/src/webui/html/upload.html
+++ b/src/webui/html/upload.html
@ -12,7 +12,6 @@ function hideAll() {
 </script>
 </head>
 <body>
-<br/>
 <iframe id="upload_frame" name="upload_frame" style="width:1px;height:1px;border:0px;" src="javascript:false;"></iframe>
 <center>
 	<h1 class="vcenter"><img class="vcenter" title="Download local torrent" src="theme/list-add"/>_(Download local torrent)</h1>