Anelok vs. CSS
Paul Boddie
paul at boddie.org.uk
Tue Jul 28 13:51:15 UTC 2015
On Tuesday 28. July 2015 09.31.43 Werner Almesberger wrote:
> 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.p
ng
I don't really get on with CSS, either, but I've taken a look at this. Spacing
problems can be really annoying, and someone will always come along with yet
another browser that decides to do things slightly differently (perhaps
operated by a pompous Mac user who demands immediate remedy for the visual
affront experienced), and so yet more trips around the block with various
debugging tools are usually required until mild satisfaction is experienced.
> 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.
With CSS less is more: as soon as you start to tweak, things automatically get
a lot harder. Add random Stack Exchange advice and things can easily get a lot
worse from there. ;-) Don't try asking about actual JavaScript on the SE
sites, by the way, because you'll get jQuery "advice" from people who don't
know the difference.
> (*) 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 ! :)
I've taken a look. Several hours later, I achieved the two things I intended
to achieve: fix up the stuff you asked about, doing it in a different way;
change the diagram effects to use plain CSS. The latter isn't something you
asked about, but since I first saw what you'd done a while ago, I was intent
on removing the scripts and using "good old" CSS instead.
(Why this kind of thing takes hours is because Firefox can behave stupidly
like expel block elements from a map element because the map element is inside
a paragraph element. Maybe this is codified somewhere, but I imagine that it's
another "quirks mode" feature of the parser handed down from the browsers of
old via the incoherent "standards-washing" process, as each commercial entity
on the W3C committee stuffs the most recently witnessed behaviour of their own
rendering engines into the standard in order to try and front-run the whole
thing and to cause their competitors and everyone else annoyance and pain.)
Anyway, I've attached the result to this message, and hopefully the list won't
strip the attachment. Otherwise, I'll send it to you personally. I took the
liberty of switching from table usage in the header to list usage, which I've
seen a lot more of for this kind of thing, and to generally "modernize" the
HTML. The image map stuff you can choose to ignore, but I have a personal
grudge against scripts - *far* too many are being used on the Web these days -
and the CSS seems to work a lot quicker in toggling the diagram elements,
anyway.
Hopefully, none of this will cause further browser hassles. I've only tested
on Firefox so far, but variations of my changes have been tested in other
contexts on the major browsers, so they should in principle work. ;-)
Paul
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.en.qi-hardware.com/pipermail/discussion/attachments/20150728/15b24e05/attachment.html>
More information about the discussion
mailing list