Code

Cascading Stylishly

[26 Oct 02] As the days continue their wintry slide into darkness and the year draws to a close, a young site's fancy turns to thoughts of redesign. Or something like that. I've been toying lately with ideas for tweaks and improvements to the 'snail, and in the process have finally got around to reading the new book on Cascading Style Sheets by Owen Briggs and co. About time I did, because it's very good indeed. Even those who know and use CSS already will find plenty of interest in it, and those who are still thinking about taking the plunge will find as good a case for doing so here as anywhere.

Early chapters by Steve Champeon and Eric Costello outline the background and basics of CSS and structural mark-up, while Matt Patterson goes into the finer points of typography and Owen tackles CSS layout with his usual aplomb. It all hangs together well, hits the right notes throughout, and doesn't overburden the reader with finicky details that would be out-of-date next release of IE or Mozilla.

The only sorry note comes towards the end, where the harsh realities of implementing CSS in existing browsers are brought home. After having the basic principles explained so clearly in earlier chapters, the browser-makers' failure to get it right seems even more annoying. Owen gives solutions to the most significant problems, but rather than outlining every specific issue he's found (which would take another whole volume) instead offers some sound strategies for testing and trouble-shooting CSS-based designs.

Even having followed Owen's progress in getting to grips with CSS quirks over the past two years, I still got plenty out of the book. The refreshingly modest page-count of a few hundred rather than several hundred means that it isn't an exhaustively complete CSS bible, but as a guide to fundamentals it's hard to beat.

link
·····

[26 Sep 02] Seven tricks that less-technical Web users don't know [via Jill]. Some surprises in there worth keeping in mind for the next redesign.

On several occasions I've seen users click the browser "Home" button when trying to get to a site's home page.

That actually makes more sense than what the 'home' button is really for. Who uses it? Wouldn't it be more useful if it took you to the current site's root level? Particularly given that:

In testing hundreds of users over a period of several years, I've never seen a non-technical user navigate by modifying the URL. Not once.

link
·····

Strike Me Lucky

[18 Jun 02] This is entirely for my own benefit. I'm sick of trying to find the answer using a Google search, so now I can find it by searching my own site:

The CSS equivalent of <strike> is <span style="text-decoration:line-through">

Why couldn't they just use "text-decoration:strike"? Too many complaints from the Teamsters?

link
·····

Float Like a Butterfly, Sting Like a Bee

[12 Jun 02] The WaSP is back.

link
·····

[23 May 02] Owen's months of immersion in CSS must have given him Neo-like powers over arcane streams of code: how else to explain this serendipitous solution to a font-sizing problem that others have been addressing with javascripts and widgets?

link
·····

Pseudo-Elementary

[21 Mar 02] Okay, here's one that was annoying the hell out of me. See the faint blue border around the links in these main entries? See how they don't appear in the menu box to the right, or around the links at the bottom of the page? Well, until today they did appear around those links in Opera 5 for Mac (and I assume PC). I got rid of them in IE and Netscape by assigning those particular hrefs a class called 'menu' and setting it to border-width:0 in my style sheet, but it didn't work in Opera. Here's how the relevant part of the style-sheet looked:

a:link, a:visited { border: 1px solid #ccffff; }
a:link.menu, a:visited.menu { border-width: 0; }

I revisited the problem today, and although I came up with a working solution using contextual selectors like ".menu a:link { border-width: 0; }", it would have involved changing the HTML of all my pages to move the classes off the hrefs and into other elements (p, div, span), which I'd rather not do. Anyway, how come assigning class="menu" wasn't working on the hrefs? Surely they were elements too?

Nope. They were pseudo-elements, at least when I was setting the styles: 'a' is an element, 'a:visited' is a pseudo-element, an element changed by the browser when certain conditions apply (in this case when a link has been visited).

The CSS-1 spec says that a browser "is not required to reformat a currently displayed document due to anchor pseudo-class transitions"—in other words, although it may choose to apply my a:hover styles for class="menu", it doesn't have to. I suspected that this was the source of the problem, since Opera is a stickler for doing what the spec requires and no more.

But since I wanted the border to apply to any anchor pseudo-elements of class="menu", what if I just set styles for the whole element?

a:link, a:visited { border: 1px solid #ccffff; }
a.menu { border-width: 0; }

Worked fine in IE and Netscape, but Opera now put a two pixel border around links of class="menu", which wasn't what I wanted at all. I made one last try:

a:link, a:visited { border: 1px solid #ccffff; }
a.menu { border-style: none; }

and tadahhh, it worked.

link
·····

Into the Quagmire

[15 Mar 02] I knew this would happen: dip my toe into the murky waters of rigorous CSS testing, and get sucked into the quagmire. Some of the problems in James's blog design weren't quite what I thought, but others persist... and I've spent so long bashing away at these test pages that I may as well make them public.

link
·····

By Jupiter!

[14 Mar 02] My vague sense of emptiness at the lack of regular japeries from old friend James is finally dispelled by his triumphant return to blogging at Gas Giant. And what better way to make a grand entrance than wearing dra... um, Roman gear. And make-up. Caesar meets the Cure. I came, I saw, I was lost in a forest.

Observant readers will notice that James is grappling with the myriad joys of CSS, with a little help from yours truly—namely, in discovering that for some reason the <p> tags after the first one inside the middle div were inheriting the 'left:40px' and adding it to the left:40px of the div itself, causing no end of mess—but only in IE5 for Mac, not Netscape 6 or Opera (the fix was to use 'margin-left:40px' instead, which works in all three). And, secondly, in working out that Netscape 6 and Opera both add padding to the width of a div when calculating where to put a border and any divs positioned to the right, whereas IE5Mac includes it in the width of the div. But you probably already knew that, ha ha, if you're One of the Damned. The fix for that is to include an appropriately wide image—like James's line of dots between blog entries—to push the border out to the same place in IE as it is in NS and Opera (do I hear transparent gifs raising their ugly invisible heads?). Neither of us has had a chance to check whether any of this works in a PC, though.

But now he's dabbled in fixed positioning, and it's all gone pear-shaped (or should that be <div style="shape:pear;">). Tssh.

Anyway, to separate oneself from the presentation for a moment, it's the content that matters. Welcome back, James.

link
·····

[14 Mar 02] Must have been staring at old code for too long this week. I just saw a banner ad for Tomb Raider and thought it said 'Lara Cruft'.

link
·····

[25 Jan 02] If you're grappling with CSS layouts, you'll find css-discuss helpful: I've been signed up only a few hours and have already picked up some good tips. [Via Owen, who's in the thick of it at the moment.]

link
·····

Front · Past · Detail · Found · Rory Central · Textuary · Walking West · Grinding Noises · Cartoon Lounge · The Stand-Up · The Twisted Bell · Pacific Islands Politics
©2002 Rory Ewins · Powered by Movable Type speedysnail