Anelok vs. CSS

Werner Almesberger werner at almesberger.net
Tue Jul 28 07:31:43 UTC 2015


I gave the Anelok Web page a bit of a face-lift:
http://www.anelok.com

Alas, CSS and I aren't friends. So the menu looks the way I want
it to look (*) on Chromium (43.0.2357.81):
http://downloads.qi-hardware.com/people/werner/anelok/tmp/web-menu-chromium.png

But the boxes are a bit taller, and the boxes and "Personal Password
Safe" both are too low on Firefox (39.0):
http://downloads.qi-hardware.com/people/werner/anelok/tmp/web-menu-firefox.png

Meanwhile, rekonq (2.4.2) places everything too high:
http://downloads.qi-hardware.com/people/werner/anelok/tmp/web-menu-rekonq.png

You can see my clumsy attempts at getting CSS to behave in
https://gitlab.com/anelok/anelok/blob/master/web/
and there especially
https://gitlab.com/anelok/anelok/blob/master/web/genpage.sh

I basically tossed in every hack and tweak I saw mentioned on Stack
Exchange, hoping I could do this with margins / padding / etc. and
alignment. Then I gave up and just forced placement with "position".
So some of the things may be redundant or even contradictory.

(*) I.e.,
  - logo and "Personal Password Safe" begin at the top of the
    page,
  - the logo is just high enough above the horizontal rule that it
    has a clear visual separation,
  - the boxes are slim and sit on top of the rule, without gap or
    overlap,

  An alternative may be to lower the logo until the bottom line is
  at the height of the rule, then add a small gap left and right.
  Haven't tried this yet.

If anyone has an idea how to make this look more consistent across
browsers, please send patches ! :)

- Werner



More information about the discussion mailing list


interactive