Changeset 217

Timestamp:

06/03/05 12:56:06 (8 years ago)

Author:

gocher

Message:

change all td/table elements to div elements in toolbar
change the stylesheet and the skins that it works

Location:

trunk

Files:

• htmlarea.css (modified) (3 diffs)
• htmlarea.js (modified) (15 diffs)
• plugins/TableOperations/table-operations.js (modified) (1 diff)
• skins/blue-look/skin.css (modified) (4 diffs)
• skins/blue-metallic/skin.css (modified) (2 diffs)
• skins/green-look/button-background.gif (deleted)
• skins/green-look/button-background.png (added)
• skins/green-look/skin.css (modified) (3 diffs)
• skins/inditreuse/skin.css (modified) (3 diffs)
• skins/xp-blue/skin.css (modified) (3 diffs)
• skins/xp-green/skin.css (modified) (3 diffs)

trunk/htmlarea.css

@@ -1 @@
-.htmlarea { background: #fff; }
+.htmlarea {margin: 2px; background: #fff; }
 
 .htmlarea .toolbar {
@@ -7 +7 @@
   border: 1px solid;
   border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
-}
-.htmlarea .toolbar table { margin: 0; font-family: tahoma,verdana,sans-serif; font-size: 11px; }
-.htmlarea .toolbar img { border: none; }
-.htmlarea .toolbar .label { padding: 0px 3px; }
-
-.htmlarea .toolbar .button {
+  
+}
+.htmlarea .toolbar .toolbarRow {
+  margin: 0; 
+  padding-left: 0px 0px 0px 2px;
+  font-family: Tahoma,Verdana,sans-serif; 
+  font-size: 11px;
+}
+.htmlarea .toolbar .toolbarRow img { margin: 0; border: none;}
+.htmlarea .toolbar .toolbarRow .label {
+  vertical-align: top;
+  position: relative;
+  top: 5px;
+  padding-right: 2px;
+}
+.htmlarea .toolbar .toolbarRow .select { 
+  vertical-align: top;
+  position: relative;
+  top: 2px;
+}
+
+.htmlarea .toolbar .toolbarRow .button {
   background: ButtonFace;
   color: ButtonText;
   border: 1px solid ButtonFace;
-  padding: 1px;
   margin: 0px;
+  width: 22px;
+  height: 22px;
+}
+
+.htmlarea .toolbar .toolbarRow .button .buttonImageContainer {
+  position: relative;
+  top: 2px;
+  left: 2px;
   width: 18px;
   height: 18px;
-}
-.htmlarea .toolbar a.button:hover {
-  border: 1px solid;
-  border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
-}
-.htmlarea .toolbar a.buttonDisabled:hover {
-  border-color: ButtonFace;
-}
-.htmlarea .toolbar .buttonActive,
-.htmlarea .toolbar .buttonPressed
-{
-  padding: 2px 0px 0px 2px;
+  overflow: hidden;
+}
+
+.htmlarea .toolbar .toolbarRow .button.buttonHover {
+  cursor: pointer;  
+  border: 1px solid;
+  border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
+}
+.htmlarea .toolbar .toolbarRow .button.buttonDisabled {
+  border-color: none;
+}
+.htmlarea .toolbar .toolbarRow .buttonActive,
+.htmlarea .toolbar .toolbarRow .buttonPressed
+{
   border: 1px solid;
   border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
 }
-.htmlarea .toolbar .buttonPressed {
+.htmlarea .toolbar .toolbarRow .buttonPressed {
   background: ButtonHighlight;
 }
@@ -45 +70 @@
   cursor: default;
   border: 1px solid ButtonShadow;
-}
-
-.htmlarea .toolbar .buttonDisabled img {
+  vertical-align: top;
+  position: relative;
+  top: 5px;
+}
+
+.htmlarea .toolbar .toolbarRow .buttonDisabled img {
   filter: gray() alpha(opacity = 25);
   -moz-opacity: 0.25;
 }
 
-.htmlarea .toolbar .separator {
-  /*position: relative;*/
+.htmlarea .toolbar .toolbarRow .separator {
   margin: 3px;
   border-left: 1px solid ButtonShadow;
   border-right: 1px solid ButtonHighlight;
   width: 0px;
-  height: 16px;
+  height: 18px;
   padding: 0px;
+  vertical-align: top;
 }
 

trunk/htmlarea.js

@@ -290 +290 @@
   this.toolbar =
   [
-    ["popupeditor"],
+    ["separator","popupeditor"],
     ["separator","formatblock","fontname","fontsize","bold","italic","underline","strikethrough"],
     ["separator","forecolor","hilitecolor","textindicator"],
@@ -298 +298 @@
     ["separator","inserthorizontalrule","createlink","insertimage","inserttable"],
     ["separator","undo","redo","selectall"], (HTMLArea.is_gecko ? [] : ["cut","copy","paste","overwrite","saveas"]),
-    ["separator","killword","removeformat","toggleborders","lefttoright", "righttoleft","separator","htmlmode","about"]
+    ["separator","killword","clearfonts","removeformat","toggleborders","lefttoright", "righttoleft","separator","htmlmode","about"]
   ];
 
@@ -701 +701 @@
   toolbar.unselectable = "1";
 
-  var tb_row = null;
   var tb_objects = new Object();
   this._toolbarObjects = tb_objects;
+  var tb_row = null;
 
         this._createToolbar1(editor, toolbar, tb_objects);
@@ -721 +721 @@
 // separate from previous createToolBar to allow dynamic change of toolbar
 HTMLArea.prototype._createToolbar1 = function (editor, toolbar, tb_objects) {
-
+  function clearBoth() {
   // This shouldn't be necessary, but IE seems to float outside of the container
   // when we float toolbar sections, so we have to clear:both here as well
   // as at the end (which we do have to do).
-  if(editor.config.flowToolbars)
-  {
-    var brk = document.createElement('div');
-    brk.style.height =
+    if(editor.config.flowToolbars)
+    {
+      var brk = document.createElement('div');
+      brk.style.height =
       brk.style.width =
       brk.style.lineHeight =
       brk.style.fontSize = '1px';
-    brk.style.clear = 'both';
-    toolbar.appendChild(brk);
+      brk.style.clear = 'both';
+      toolbar.appendChild(brk);
+    }
   }
 
@@ -740 +741 @@
     if(typeof tb_row != 'undefined' && tb_row.childNodes.length == 0) return;
 
-    var table = document.createElement("table");
-    table.border = "0px";
-    table.cellSpacing = "0px";
-    table.cellPadding = "0px";
-    if(editor.config.flowToolbars)
-    {
-      if(HTMLArea.is_ie)
-      {
-        table.style.styleFloat = "left";
-      }
-      else
-      {
-        table.style.cssFloat = "left";
-      }
-    }
-
-    toolbar.appendChild(table);
-    // TBODY is required for IE, otherwise you don't see anything
-    // in the TABLE.
-    var tb_body = document.createElement("tbody");
-    table.appendChild(tb_body);
-    tb_row = document.createElement("tr");
-    tb_body.appendChild(tb_row);
-
-    table.className = 'toolbarRow'; // meh, kinda.
+    tb_row = document.createElement("div");
+    if(editor.config.flowToolbars) {
+      if(HTMLArea.is_ie) {
+        tb_row.style.styleFloat = "left";
+      } else {
+        tb_row.style.cssFloat = "left";
+      }
+    }
+    tb_row.className = 'toolbarRow'; // meh, kinda.
+    tb_row.style.whiteSpace = "nowrap";
+    toolbar.appendChild(tb_row);
   }; // END of function: newLine
-
-  // init first line
-  newLine();
 
   // updates the state of a toolbar element.  This function is member of
@@ -841 +825 @@
     if (options) {
       el = document.createElement("select");
+      el.className = "select";
       el.title = tooltip;
       var obj = {
@@ -867 +852 @@
   // appends a new button to toolbar
   function createButton(txt) {
+    var btn = editor.config.btnList[txt];
+    if (btn) {
     // the element that will be created
-    var el = null;
-    var btn = null;
-    switch (txt) {
-        case "separator":
-          if(editor.config.flowToolbars) newLine();
-      el = document.createElement("div");
-      el.className = "separator";
-      break;
-        case "space":
-      el = document.createElement("div");
-      el.className = "space";
-      break;
-      case "linebreak":
-          newLine();
-          return false;
-        case "textindicator":
-      el = document.createElement("div");
-      el.appendChild(document.createTextNode("A"));
-      el.className = "indicator";
-      el.title = HTMLArea._lc("Current style");
-      var obj = {
-        name    : txt, // the button name (i.e. 'bold')
-        element : el, // the UI element (DIV)
-        enabled : true, // is it enabled?
-        active  : false, // is it pressed?
-        text    : false, // enabled in text mode?
-        cmd     : "textindicator", // the command ID
-        state   : setButtonStatus // for changing state
-      };
-      tb_objects[txt] = obj;
-      break;
-        default:
-      btn = editor.config.btnList[txt];
-    }
-    if (!el && btn) {
-      el = document.createElement("a");
-      el.style.display = 'block';
-      el.href = 'javascript:void(0)';
-      el.style.textDecoration = 'none';
+      var el = document.createElement("div");
+      el.className = "button";
       el.title = btn[0];
-      el.className = "button";
       // let's just pretend we have a button object, and
       // assign all the needed information to it.
       var obj = {
-        name    : txt, // the button name (i.e. 'bold')
-        element : el, // the UI element (DIV)
-        enabled : true, // is it enabled?
-        active  : false, // is it pressed?
-        text    : btn[2], // enabled in text mode?
-        cmd     : btn[3], // the command ID
-        state   : setButtonStatus, // for changing state
-        context : btn[4] || null // enabled in a certain context?
+        name: txt, // the button name (i.e. 'bold')
+        element: el, // the UI element (DIV)
+        enabled: true, // is it enabled?
+        active: false, // is it pressed?
+        text: btn[2], // enabled in text mode?
+        cmd: btn[3], // the command ID
+        state: setButtonStatus, // for changing state
+        context: btn[4] || null // enabled in a certain context?
       };
       tb_objects[txt] = obj;
       // handlers to emulate nice flat toolbar buttons
+      HTMLArea._addEvent(el, "mouseover", function () {
+        if (obj.enabled) with (HTMLArea) {
+          _addClass(el, "buttonHover");
+        }
+      });
+
       HTMLArea._addEvent(el, "mouseout", function () {
         if (obj.enabled) with (HTMLArea) {
-          //_removeClass(el, "buttonHover");
+          _removeClass(el, "buttonHover");
           _removeClass(el, "buttonActive");
           (obj.active) && _addClass(el, "buttonPressed");
@@ -942 +897 @@
         if (obj.enabled) with (HTMLArea) {
           _removeClass(el, "buttonActive");
-          //_removeClass(el, "buttonHover");
+          _removeClass(el, "buttonHover");
           if(HTMLArea.is_gecko)
           {
@@ -951 +906 @@
         }
       });
-
-      var i_contain = HTMLArea.makeBtnImg(btn[1]);
-      var img = i_contain.firstChild;
-      el.appendChild(i_contain);
-
+      
+      var img = HTMLArea.makeBtnImg(btn[1]);
+      var imgholder = document.createElement("div");
+      imgholder.className = "buttonImageContainer";
+      imgholder.appendChild(img);
+      el.appendChild(imgholder);
+      
       obj.imgel = img;
       obj.swapImage = function(newimg)
@@ -965 +922 @@
           img.style.top  = newimg[2] ? ('-' + (18 * (newimg[2] + 1)) + 'px') : '-18px';
           img.style.left = newimg[1] ? ('-' + (18 * (newimg[1] + 1)) + 'px') : '-18px';
+         // img.style.bottom = newimg[2] ? ('-' + (18 * (newimg[2] + 19)) + 'px') : '-36px';          
+         // img.style.right = newimg[1] ? ('-' + (18 * (newimg[1] + 19)) + 'px') : '-36px';
         }
         else
@@ -973 +932 @@
         }
       }
-
-    } else if (!el) {
-      el = createSelect(txt);
-    }
-
+    }  
     return el;
   };
 
+  clearBoth();
+  newLine(); // init first line
   var first = true;
   for (var i = 0; i < this.config.toolbar.length; ++i) {
@@ -1000 +957 @@
         var label = RegExp.$2;
         if (l7ed) {
-          label = HTMLArea._lc(label);
-        }
-        var tb_cell = document.createElement("td");
-        tb_row.appendChild(tb_cell);
-        tb_cell.className = "label";
-        tb_cell.innerHTML = label;
+                label = HTMLArea._lc(label);
+        }
+        var tb_element = document.createElement("div");
+        tb_element.className = "label";
+        tb_element.innerHTML = label;
       }
       else if(typeof code != 'function')
       {
-        var tb_element = createButton(code);
-
-        if (tb_element)
-        {
-          var tb_cell = document.createElement("td");
-          tb_cell.className = 'toolbarElement';
-          tb_row.appendChild(tb_cell);
-          tb_cell.appendChild(tb_element);
-        }
-        else if (tb_element == null)
-        {
+        var tb_element = null;
+        switch (code) {
+          case "separator":
+            if(editor.config.flowToolbars) newLine();
+            tb_element = document.createElement("div");
+            tb_element.className = "separator";
+            break;
+          case "space":
+            tb_element = document.createElement("div");
+            tb_element.className = "space";
+            break;
+          case "linebreak":
+            newLine();
+            break;
+          case "textindicator":
+            tb_element = document.createElement("div");
+            tb_element.appendChild(document.createTextNode("A"));
+            tb_element.className = "indicator";
+            tb_element.title = HTMLArea._lc("Current style");
+            var obj = {
+              name      : code, // the button name (i.e. 'bold')
+              element : tb_element, // the UI element (DIV)
+              enabled : true, // is it enabled?
+              active    : false, // is it pressed?
+              text      : false, // enabled in text mode?
+              cmd       : "textindicator", // the command ID
+              state     : setButtonStatus // for changing state
+            };
+            tb_objects[code] = obj;
+            break;
+        default:
+          tb_element = createButton(code);
+        }
+      }  
+      if (code != "linebreak") {
+        if (!tb_element)
+          tb_element = createSelect(code);
+        if (tb_element) {
+          if(HTMLArea.is_ie) {
+            tb_element.style.display = "inline";
+          } else {
+            tb_element.style.cssFloat = "left";
+          }
+          tb_row.appendChild(tb_element);
+        }
+        else if (tb_element == null) {
           alert("FIXME: Unknown toolbar item: " + code);
         }
@@ -1025 +1016 @@
     }
   }
-
-  if(editor.config.flowToolbars)
-  {
-    var brk = document.createElement('div');
-    brk.style.height =
-      brk.style.width =
-      brk.style.lineHeight =
-      brk.style.fontSize = '1px';
-    brk.style.clear = 'both';
-    toolbar.appendChild(brk);
-  }
-
+  clearBoth();
   return toolbar;
 };
@@ -1049 +1029 @@
     doc._htmlareaImgCache = { };
   }
-
-  var i_contain = null;
-  if(HTMLArea.is_ie && ((!doc.compatMode) || (doc.compatMode && doc.compatMode == "BackCompat")))
-  {
-    i_contain = doc.createElement('span');
-  }
-  else
-  {
-    i_contain = doc.createElement('div');
-    i_contain.style.position = 'relative';
-  }
-
-  i_contain.style.overflow = 'hidden';
-  i_contain.style.width = "18px";
-  i_contain.style.height = "18px";
-  i_contain.className    = 'buttonImageContainer';
-
   var img = null;
   if(typeof imgDef == 'string')
@@ -1100 +1063 @@
     img.style.left = imgDef[1] ? ('-' + (18 * (imgDef[1] + 1)) + 'px') : '-18px';
   }
-  i_contain.appendChild(img);
-  return i_contain;
+  return img;
 }
 

trunk/plugins/TableOperations/table-operations.js

@@ -684 +684 @@
 // the list of buttons added by this plugin
 TableOperations.btnList = [
+  null,
         // table properties button
     ["table-prop",       "table", "Table properties"],

trunk/skins/blue-look/skin.css

@@ -1 @@
-.htmlarea .toolbar, .htmlarea .toolbar .button
+.htmlarea .toolbar { background-color:#f7f8fd;}
+
+.htmlarea .toolbar .toolbarRow
 {
-  background-color:#f7f8fd;
+  border: 1px solid #DEDEDE;
+  -moz-border-radius: 3px;
 }
-
-.htmlarea .toolbarRow
-{
-  margin-top:2px;
-  margin-bottom:2px;
-  border:1px dotted #DEDEDE;
-  padding:2px;
-  -moz-border-radius:3px;
-  margin:4px;
-}
-
-.htmlarea .toolbar .button
+.htmlarea .toolbar .toolbarRow .button
 {
   background-image: url(button-background.png);
-  width:20px;
-  height:20px;
-  padding:0px;
   border:1px solid #f7f8fd;
 }
-
-.buttonImageContainer
-{
-  position:relative;
-  left:1px;
-  top :1px;
-}
-
-.htmlarea .toolbar .separator {
-  margin:0px;
+.htmlarea .toolbar .toolbarRow .separator {
   background-image: url(separator.gif);
   border:1px #f7f8fd;
-  width:   7px;
-  height: 20px;
-  padding: 0px;
+  width:7px;
 }
-
-.htmlarea .toolbar a.button:hover
+.htmlarea .toolbar .toolbarRow .buttonHover
 {
-  border: 1px solid;
   border-color: white #CCC #CCC white;
 }
-
-.htmlarea .toolbar a.buttonDisabled:hover
+.htmlarea .toolbar .toolbarRow .buttonDisabled
 {
   border-color: #f7f8fd;
 }
-
-.htmlarea .toolbar .button.buttonActive,
-.htmlarea .toolbar .button.buttonPressed
+.htmlarea .toolbar .toolbarRow .button.buttonActive,
+.htmlarea .toolbar .toolbarRow .button.buttonPressed
 {
   border: 1px solid;
   border-color: #CCC white white #CCC;
 }
-
 .htmlarea .statusBar {
   border-color: #CCC white white #CCC;
@@ -67 +40 @@
   font: 11px helvetica,arial,sans-serif;
 }
-
 .htmlarea .statusBar .statusBarTree
 {
@@ -73 +45 @@
   margin: 3px;
 }
-
 .htmlarea .statusBar .statusBarTree a
 {
@@ -80 +51 @@
   text-decoration:none;
 }
-
 .htmlarea .panel h1
 {

trunk/skins/blue-metallic/skin.css

@@ -1 @@
-.htmlarea .toolbar, .htmlarea .toolbar .button
+.htmlarea .toolbar { background-color:#f7f8fd;}
+
+.htmlarea .toolbar .toolbarRow
 {
-  background-color:#f7f8fd;
+  background-image: url(button-background.png);
+  border:1px solid #DEDEDE;
+  -moz-border-radius:3px;
 }
 
-.htmlarea .toolbarRow
-{
+.htmlarea .toolbar .toolbarRow .button {
   background-image: url(button-background.png);
-  margin-top:2px;
-  margin-bottom:2px;
-  border:1px dotted #DEDEDE;
-  padding:2px;
-  -moz-border-radius:3px;
-  margin:4px;
+  border:1px solid #f7f8fd;
+}
+.htmlarea .toolbar .toolbarRow .separator {
+  background-image: url(separator.gif);
+  border:1px #f7f8fd;
+  width:7px;
 }
 
-.htmlarea .toolbar .button {
-  background-image: url(button-background.png);
-  width:20px;
-  height:20px;
-  padding:0px;
-  border:1px solid #f7f8fd;
-}
-
-.buttonImageContainer
+.htmlarea .toolbar .toolbarRow .buttonHover
 {
-  position:relative;
-  left:1px;
-  top :1px;
-}
-
-.htmlarea .toolbar .separator 
-{
-  margin:0px;
-  background-image: url(separator.gif);
-  border:1px #f7f8fd;
-  width:   7px;
-  height: 20px;
-  padding: 0px;
-}
-
-.htmlarea .toolbar a.button:hover
-{
-  border: 1px solid;
   border-color: #316AC5;
   background-image: none !important;
@@ -48 +25 @@
 }
 
-.htmlarea .toolbar a.buttonDisabled:hover
+.htmlarea .toolbar .toolbarRow .buttonDisabled
 {
-  border-color: #316AC5;
   background-color : #FFE1AC;
 }
 
-.htmlarea .toolbar .button.buttonActive,
-.htmlarea .toolbar .button.buttonPressed
+.htmlarea .toolbar .toolbarRow .button.buttonActive,
+.htmlarea .toolbar .toolbarRow .button.buttonPressed
 {
-  border: 1px solid;
   border-color: #79A4CC #FFFFFF #FFFFFF #79A4CC;
   background-image: none !important;

trunk/skins/green-look/skin.css

@@ -1 @@
-.htmlarea .toolbar, .htmlarea .toolbar .button
+.htmlarea .toolbar{ background-color:#f8fdf8;
+}
+.htmlarea .toolbar .toolbarRow
 {
-  background-color:#f8fdf8;
+  border:1px solid #DEDEDE;
+  -moz-border-radius:3px;
 }
-.htmlarea .toolbarRow
+.htmlarea .toolbar .toolbarRow .button
 {
-  margin-top:2px;
-  margin-bottom:2px;
-  border:1px dotted #DEDEDE;
-  padding:2px;
-  -moz-border-radius:3px;
-  margin:4px;
-}
-.htmlarea .toolbar .button
-{
-  background-image:url(button-background.gif);
-  width:20px;
-  height:20px;
-  padding:0;
+  background-image:url(button-background.png);
   border:1px solid #f8fdf8;
 }
-.buttonImageContainer
-{
-  position:relative;
-  left:1px;
-  top:1px;
-}
-.htmlarea .toolbar .separator {
-  margin:0;
+.htmlarea .toolbar .toolbarRow .separator {
   background-image:url(separator.gif);
   border:1px #f8fdf8;
   width:7px;
-  height:20px;
-  padding:0;
 }
-.htmlarea .toolbar a.button:hover
+.htmlarea .toolbar .toolbarRow .buttonHover
 {
-  border:1px solid;
   border-color:#fff #ccc #ccc #fff;
 }
-.htmlarea .toolbar a.buttonDisabled:hover
+.htmlarea .toolbar .toolbarRow .buttonDisabled
 {
   border-color:#f8fdf8;
 }
-.htmlarea .toolbar .buttonActive,
-.htmlarea .toolbar .buttonPressed
+.htmlarea .toolbar .toolbarRow .button.buttonActive,
+.htmlarea .toolbar .toolbarRow .button.buttonPressed
 {
   border:1px solid;
   border-color:#ccc #fff #fff #ccc;
-  background:#ffb166;
 }
 .htmlarea .statusBar {
@@ -54 +34 @@
   padding:0;
   height:20px;
-  background-image:url(button-background.gif);
+  background-image:url(button-background.png);
   background-repeat:repeat-x;
   background-color:#f8fdf8;
@@ -73 +53 @@
 .htmlarea .panel h1
 {
-  background-image:url(button-background.gif);
+  background-image:url(button-background.png);
   background-repeat:repeat-x;
   background-color:#f8fdf8;

trunk/skins/inditreuse/skin.css

@@ -9 +9 @@
   background-image:url(button-background.png);
 }
-.htmlarea .toolbar .button {
+.htmlarea .toolbar .toolbarRow .button{
   width:20px;
   height:20px;
@@ -16 +16 @@
   background-image:url(button-background.png);
 }
-.buttonImageContainer {
-  position:relative;
-  left:1px;
-  top:1px;
-}
-.htmlarea .toolbar .separator {
+.htmlarea .toolbar .toolbarRow .separator {
   margin:0;
   background-image: url(separator.png);
@@ -29 +24 @@
   border:none;
 }
-.htmlarea .toolbar a.button:hover {
+.htmlarea .toolbar .toolbarRow .buttonHover {
   border:none;
   padding:1px;
   background-image:url(hover.png);
 }
-.htmlarea .toolbar .button.buttonPressed
+.htmlarea .toolbar .toolbarRow .button.buttonPressed
 {
   padding:1px;

trunk/skins/xp-blue/skin.css

@@ -4 +4 @@
   background-repeat:repeat-y;
 }
-.htmlarea .toolbarRow {
+.htmlarea .toolbar .toolbarRow {
   margin-top:2px;
   margin-bottom:2px;
   background-image:url(button-background.png);
 }
-.htmlarea .toolbar .button {
+.htmlarea .toolbar .toolbarRow .button {
   width:20px;
   height:20px;
@@ -16 +16 @@
   background-image:url(button-background.png);
 }
-.buttonImageContainer {
-  position:relative;
-  left:1px;
-  top:1px;
-}
-.htmlarea .toolbar .separator {
-  margin:0;
+.htmlarea .toolbar .toolbarRow .separator {
   background-image:url(separator.png);
   width:7px;
@@ -28 +22 @@
   padding:0;
 }
-.separator {
-  border:none;
+.htmlarea .toolbar .toolbarRow .buttonHover {
+  background-image:url(hover.png);
+  padding:0;
+  border: 1px solid;  
+  border-color: white #CCC #CCC white;
 }
-.htmlarea .toolbar a.button:hover {
-  border:1px solid #003355;
-  padding:0;
-  background-image:url(hover.png);
-}
-.htmlarea .toolbar .button.buttonPressed
+.htmlarea .toolbar .toolbarRow .button.buttonPressed
 {
   border:1px solid #003355;

trunk/skins/xp-green/skin.css

@@ -4 +4 @@
   background-repeat:repeat-y;
 }
-.htmlarea .toolbarRow {
+.htmlarea .toolbar .toolbarRow {
   margin-top:2px;
   margin-bottom:2px;
   background-image:url(button-background.png);
 }
-.htmlarea .toolbar .button {
+.htmlarea .toolbar .toolbarRow .button {
   width:20px;
   height:20px;
@@ -16 +16 @@
   background-image:url(button-background.png);
 }
-.buttonImageContainer {
-  position:relative;
-  left:1px;
-  top:1px;
-}
-.htmlarea .toolbar .separator {
-  margin:0;
+.htmlarea .toolbar .toolbarRow .separator {
   background-image:url(separator.png);
   width:7px;
@@ -28 +22 @@
   padding:0;
 }
-.separator {
-  border:none;
-}
-.htmlarea .toolbar a.button:hover {
+.htmlarea .toolbar .toolbarRow .buttonHover {
   border:1px solid #335500;
   padding:0;
   background-image:url(hover.png);
 }
-.htmlarea .toolbar .button.buttonPressed
+.htmlarea .toolbar .toolbarRow .button.buttonPressed
 {
   border:1px solid #335500;