- Xtemplate improvements by Kristjan:

> no changes in presentation, just a structure changes
>
> - removed inline styles from .xtmpl
> - removed duplicated #header class reference, renamed second one to #content as context$
> - simplified some CSS selectors (tested on IE and mozilla, please test on Opera, if pos$
> - some .class -> #class

Note: tested on Opera; couldn't spot any differences.

2 files changed, 22 insertions, 17 deletions

diff --git a/themes/xtemplate/xtemplate.css b/themes/xtemplate/xtemplate.css
index 8a1e3c67a..614d0aeb2 100644
--- a/themes/xtemplate/xtemplate.css
+++ b/themes/xtemplate/xtemplate.css
@@ -42,36 +42,39 @@ p {
 img {
   border-width: 0;
 }
-.header {
+#header, #content {
   width: 100%;
 }
-.header .menu {
+#header {
   background-color: #69c;
-  padding: 0.5em 0.5em 0 0.5em;
 }
-.menu #logo {
-  vertical-align: middle;
+#logo {
+  vertical-align: bottom;
   border: 0;
-  margin-bottom: .8em;
   font-weight: bold;
   font-size: 1.9em;
   color: #fff;
 }
-.menu #primary {
+#menu {
+  padding: 0.5em 0.5em 0 0.5em;
+  text-align: right;
+  vertical-align: middle;
+}
+#primary {
   font-size: 1.0em;
   padding: 0em 0.8em 0.5em 0;
   color: #9cf;
 }
-.menu #primary a {
+#primary a {
   font-weight: bold;
   color: #fff;
 }
-.menu #secondary {
+#secondary {
   padding: 0 1em 0.5em 0;
   font-size: 0.8em;
   color: #9cf;
 }
-.menu #secondary a {
+#secondary a {
   font-weight: bold;
   color: #9cf;
 }
@@ -109,6 +112,7 @@ img {
   width: 16em;
   /* padding in px not ex because IE messes up 100% width tables otherwise */
   padding: 10px;
+  vertical-align: top;
 }
 #footer {
   background-color: #eee;
diff --git a/themes/xtemplate/xtemplate.xtmpl b/themes/xtemplate/xtemplate.xtmpl
index 7612b3d74..17ca06269 100644
--- a/themes/xtemplate/xtemplate.xtmpl
+++ b/themes/xtemplate/xtemplate.xtmpl
@@ -13,11 +13,12 @@
 
 <body{onload_attributes}>
 
-<table border="0" cellpadding="0" cellspacing="0" class="header">
+<table border="0" cellpadding="0" cellspacing="0" id="header">
   <tr>
-    <td class="menu" style="vertical-align: bottom;">
-    <a href="./"><div id="logo">{logo}</div></a></td>
-    <td class="menu" style="text-align: right; vertical-align: middle;">
+    <td id="logo">
+      <a href="./">{logo}</a>
+    </td>
+    <td id="menu">
       <div id="secondary">{secondary_links}</div>
       <div id="primary">{primary_links}</div>
       <!-- BEGIN: search_box -->
@@ -31,10 +32,10 @@
     </td>
   </tr>
 </table>
-<table border="0" cellpadding="0" cellspacing="0" class="header">
+<table border="0" cellpadding="0" cellspacing="0" id="content">
   <tr>
     <!-- BEGIN: blocks -->
-      <td id="sidebar-left" style="vertical-align: top;">
+      <td id="sidebar-left">
         {blocks}
       </td>
     <!-- END: blocks -->
@@ -92,7 +93,7 @@
       </div><!-- main -->
     </td>
     <!-- BEGIN: blocks -->
-    <td id="sidebar-right" style="vertical-align: top;">
+    <td id="sidebar-right">
       {blocks}
     </td>
     <!-- END: blocks -->