improve legend styling

Top-align the right part (usually both sides are about equal in height,
but it would get ugly in case lines are wrapped).

Also increase legend label margin (also in case of wrapping), because
the actual width is 6.2em + 4px in padding.  A more correct solution
would be CSS3 border-sizing:border-box, but not really worth it in this
case (stupid prefixes, not to mention msie boycotting anything new).

diff --git a/base.css b/base.css
index 40d0cb1f87be61bbc52f4cff1f75219ce026cea8..0bc7a131945e35ea92f84755d35a5b298b9c2e34 100644 (file)
--- a/base.css
+++ b/base.css
@@ -68,7 +68,7 @@ ul.keys li b {
        line-height: 2.5ex; /* inherits otherwise */
        padding-left: 2px;
 }
        line-height: 2.5ex; /* inherits otherwise */
        padding-left: 2px;
 }

-ul.keys.omni li {
+ul.keys.omni li { /* omni-present esc */

        width: 8.5em;
 }
 
        width: 8.5em;
 }
 


@@ -148,13 +148,14 @@ p.footer {
 .help > * {
        display: table-cell;
        width: 20%;
 .help > * {
        display: table-cell;
        width: 20%;

+       vertical-align: top;

 }
 
 .left dl.legend {
 }
 
 .left dl.legend {

-       margin-left: 6.2em;
+       margin-left: 6.4em; /* a bit over 6.2em to allow for borders+padding (border-sizing would work too) */

 }
 .left dl.legend dt {
 }
 .left dl.legend dt {

-       margin-left: -6.2em; /* msie<=6 multiply this by two for some reason */
+       margin-left: -6.4em; /* msie<=6 multiply this by two for some reason */

        float: left;
        clear: left;
 }
        float: left;
        clear: left;
 }


@@ -162,10 +163,10 @@ p.footer {
        float: left; /* align next to dt (except msie<=7 does just the opposite) */
 }
 .right dl.legend {
        float: left; /* align next to dt (except msie<=7 does just the opposite) */
 }
 .right dl.legend {

-       margin-right: 6.2em;
+       margin-right: 6.4em;

 }
 .right dl.legend dt {
 }
 .right dl.legend dt {

-       margin-right: -6.2em;
+       margin-right: -6.4em;

        float: right;
        clear: right;
 }
        float: right;
        clear: right;
 }