This morning, I was wondering how The Register‘s
headings were built so I gave a quick look at the CSS that drives the layout. It was
quite interesting to read some of the comments there annotated the code. Things like:
/* For some reason when shrinking #MastheadTop to 90%, ‘Win IE’ decides that we also
wanted the ‘Biting the hand that feeds IT’ slogan hiding. It isn’t missing entirely
of course — that would be too easy — it’s just initially hidden, but can be selected
by dragging over it with the mouse. Furthermore, after being deselected, it then displays
exactly as it should’ve done in the first place, white on red! We couldn’t’ve
asked for such behaviour even if we’d wanted it! (And, unbelievably, this doesn’t
actually happen if we go for 89% instead of 90%!) But, amazingly, giving the box a
height or width fixes the problem. That’s fine, except we don’t know what either the
height or width should be. Actually, that isn’t a problem, cos another ‘IE’
bug means that if you set a box to a height that’s too small for it, ‘IE’ ignores
what you said and makes it bigger anyway! So setting the height to 1% doesn’t
actually affect the height, but prod ‘IE’ in remember to display all the text it’s
supposed to. Yes, really. Has the whole world gone mad? Has it?
This technique, apparently, is ‘The Holly Hack’ http://www.positioniseverything.net/explorer/threepxtest.html.
Thanks to that site for the explanation: I’m almost certain that I would never have
thought of doing this by myself! */
and
/* single border running all the way round the outside, with the watermark just clear
on the top-right corner by a single pixel; actually that can’t be done (1px vertically
is one pixel from the top, but 1px horizontally is from the left; -1px is also from
the left, but crops the left-most column 99% might work if the box is rendered an
appropriate number of pixels wide; but the only setting that works from the right
is ‘right’ and there isn’t a way of measuring a pixel (or 0.1em or anything) from
the there), so instead ensure that the image used has a blank row and column along
those edges (ugh!); actually, even that doesn’t work in ‘IE’ — the outer edge is
positioned under the border (rather than inside it), so the watermark still touches
the border, so the image actually has to have 2 blank rows and columns along the edge
(which makes the gap wider than desired in standards-compliant browsers, but it doesn’t
look bad — I knew that eventually ‘IE’ would have a bug whose work-around had a negative
effect in other browsers): */
Besides taking away some interesting solutions in the cross-browser domain there were
some other things I learnt.
-
Comments in publicly downloadable code are dangerous. These comments only gave away
information about web design and problems with a particular browser; but if there
had been references to the client’s business or operations, or even technical infrastructure,
this could constitute a pretty serious security breach. -
Keep comments short! I sometimes wondered why their webpages rendered incorrectly
on a flaky connection. There were a number of times when the content of the page downloaded,
but the style sheet didn’t. The CSS file is 23k in size, and the bulk of it is comments. -
If you’re struggling with cross-browser issues. You are not alone .. there’s loads
of people out there in the same hell.
Anyway, it made a fascinating read and I wish Hannah Dee & Smylers all the best!