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


interactive