From: Mischa POSLAWSKY Date: Sat, 19 Jul 2008 01:24:01 +0000 (+0000) Subject: improve legend styling X-Git-Tag: v1.1~2 X-Git-Url: http://git.shiar.nl/sheet.git/commitdiff_plain/f530acce63608ef882e97327ad8ca31d95f0cfe6 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 40d0cb1..0bc7a13 100644 --- 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; }