improve legend styling
authorMischa POSLAWSKY <perl@shiar.org>
Sat, 19 Jul 2008 01:24:01 +0000 (01:24 +0000)
committerMischa POSLAWSKY <perl@shiar.org>
Fri, 1 Aug 2008 00:18:29 +0000 (00:18 +0000)
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).

base.css

index 40d0cb1..0bc7a13 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;
 }
-ul.keys.omni li {
+ul.keys.omni li { /* omni-present esc */
        width: 8.5em;
 }
 
@@ -148,13 +148,14 @@ p.footer {
 .help > * {
        display: table-cell;
        width: 20%;
+       vertical-align: top;
 }
 
 .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 {
-       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;
 }
@@ -162,10 +163,10 @@ p.footer {
        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 {
-       margin-right: -6.2em;
+       margin-right: -6.4em;
        float: right;
        clear: right;
 }