Toolbar buttons are now more clearer, e.g. list buttons look like little lists.

static/css/ie6.css

@@ -9,7 +9,7 @@
   top: expression( eval( document.compatMode && document.compatMode == 'CSS1Compat' ) ? documentElement.scrollTop + 20 : document.body.scrollTop + 20 );
   margin-left:expression( 
     document.body.clientWidth < ( 900 / 12 ) * 
-    parseInt( document.body.currentStyle.fontSize ) ?  "-4em": "0em"
+    parseInt( document.body.currentStyle.fontSize ) ?  "-2em": "2em"
   );
 }
 
@@ -58,3 +58,18 @@
   height: expression( this.scrollHeight > 200 ? "200px" : "auto" );
   width: expression( this.scrollHeight > 200 ? "12em" : "auto" );
 }
+
+#toolbar .button_wrapper {
+  position: absolute;
+}
+
+.toolbar_text {
+  position: relative;
+  top: 0.375em;
+}
+
+.toolbar_list_text {
+  position: relative;
+  top: -0.625em;
+  line-height: 50%;
+}

static/css/ie7.css

@@ -15,3 +15,15 @@
 #link_area {
   margin-left: 1.5em;
 }
+
+.toolbar_text {
+  position: relative;
+  top: 0.375em;
+  height: 2em;
+}
+
+.toolbar_list_text {
+  position: relative;
+  top: -0.625em;
+  line-height: 50%;
+}

static/css/style.css

@@ -43,7 +43,6 @@ ol li {
 }
 
 #toolbar {
-  float: left;
   width: 15em;
   max-width: 18%;
   position: fixed;
@@ -52,14 +51,8 @@ ol li {
   z-index: 1;
 }
 
-#toolbar ul li {
-  list-style: none;
-  text-indent: -2.5em;
-  margin-top: 0em;
-  margin-left: 0em;
-  margin-bottom: 0.25em;
-  padding-top: 0em;
-  padding-left: 0em;
+#toolbar .button_wrapper {
+  float: right;
 }
 
 #toolbar .button {
@@ -69,11 +62,18 @@ ol li {
   height: 2em;
   width: 2em;
   font-size: 125%;
+  text-align: center;
+  vertical-align: middle;
+  display: table-cell;
   outline: none;
   -moz-border-radius: 0.5em;
   -webkit-border-radius: 0.5em;
 }
 
+#toolbar div {
+  margin-bottom: 0.25em;
+}
+
 #toolbar .button:hover {
   background-color: #ffcc66;
 }
@@ -88,6 +88,21 @@ ol li {
   background-color: #ffbb55;
 }
 
+.toolbar_link_button {
+  font-size: 60%;
+}
+
+.toolbar_list_text {
+  font-size: 50%;
+  line-height: 90%;
+}
+
+#createLink {
+  color: blue;
+  font-weight: bold;
+  text-decoration: underline;
+}
+
 #bold {
   font-weight: bold;
 }

view/Toolbar.py

@@ -1,23 +1,50 @@
-from Tags import Div, Ul, Li, A, Input
+from Tags import P, Div, A, Input, Span, Br
 
 
 class Toolbar( Div ):
   def __init__( self ):
     Div.__init__(
       self,
-      Ul(
-        Li( Input( type = u"button", value = u"+", id = u"newNote", title = u"new note [ctrl-N]", class_ = u"button" ) ),
-        Li( Input( type = u"button", value = u"&#8594", id = u"createLink", title = u"note link [ctrl-L]", class_ = u"button" ) ),
-      ),
-      Ul(
-        Li( Input( type = u"button", value = u"B", id = u"bold", title = u"bold [ctrl-B]", class_ = u"button" ) ),
-        Li( Input( type = u"button", value = u"I", id = u"italic", title = u"italic [ctrl-I]", class_ = u"button" ) ),
-        Li( Input( type = u"button", value = u"U", id = u"underline", title = u"underline [ctrl-U]", class_ = u"button" ) ),
-        Li( Input( type = u"button", value = u"T", id = u"title", title = u"title [ctrl-T]", class_ = u"button" ) ),
-      ),
-      Ul(
-        Li( Input( type = u"button", value = u"•", id = u"insertUnorderedList", title = u"bullet list [ctrl-period]", class_ = u"button" ) ),
-        Li( Input( type = u"button", value = u"1.", id = u"insertOrderedList", title = u"numbered list [ctrl-1]", class_ = u"button" ) ),
+      Div(
+        P(
+          Div( Div( Span( u"+", class_ = u"toolbar_text" ), id = u"newNote", title = u"new note [ctrl-N]", class_ = u"button" ) ),
+          Div( Div(
+            Span(
+              u"link",
+              class_ = u"toolbar_text toolbar_link_button",
+            ),
+            id = u"createLink", title = u"link [ctrl-L]", class_ = u"button"
+          ) ),
+        ),
+        P(
+          Div( Div( Span( u"B", class_ = u"toolbar_text" ), id = u"bold", title = u"bold [ctrl-B]", class_ = u"button" ) ),
+          Div( Div( Span( u"I", class_ = u"toolbar_text" ), id = u"italic", title = u"italic [ctrl-I]", class_ = u"button" ) ),
+          Div( Div( Span( u"U", class_ = u"toolbar_text" ), id = u"underline", title = u"underline [ctrl-U]", class_ = u"button" ) ),
+          Div( Div( Span( u"T", class_ = u"toolbar_text" ), id = u"title", title = u"title [ctrl-T]", class_ = u"button" ) ),
+        ),
+        P(
+          Div( Div(
+            Span(
+              u"• ―", Br(),
+              u"• ―", Br(),
+              u"• ―", Br(),
+              Br( class_ = "undisplayed" ), # to make IE 6 happy. without this, the last list element is truncated
+              class_ = u"toolbar_list_text",
+            ),
+            id = u"insertUnorderedList", title = u"bullet list [ctrl-period]", class_ = u"button",
+          ) ),
+          Div( Div(
+            Span(
+              u"1.―", Br(),
+              u"2.―", Br(),
+              u"3.―", Br(),
+              Br( class_ = "undisplayed" ),
+              class_ = u"toolbar_list_text",
+            ),
+            id = u"insertOrderedList", title = u"numbered list [ctrl-1]", class_ = u"button",
+          ) ),
+        ),
+        class_ = u"button_wrapper",
       ),
       id = u"toolbar",
       class_ = u"undisplayed", # start out as hidden, and then shown in the browser if the current notebook is read-write