Posts in the CSS Category

Ian Hickson complains that he can’t read meyerweb.com due to his high-resolution display being placed too far away.  Two words, Ian: Text Zoom.  Two more words: user stylesheet.  (Three words, if you prefer “style sheet.”)  You can make the Web more legible with this simple rule:

html, body {font-size: 1em !important;}

That will reset this site’s text to match your browser’s default font size setting, because I do use ems and percentages for all elements that descend from the body element.  On the body, I use a pixel value for font-size, thus establishing the basic size of text for the site, and every other element scales from there.  Reset that element’s size, and you change the baseline from which the rest of the site is sized (which is how the “advanced setup” text-sizing feature works).  The same will happen on the new DevEdge, as it happens, and on any other site that intelligently uses inheritance and CSS to size text.  The tools are there.  Use them to your advantage.

(Aside: I find it weirdly funny that Ian’s complaining about not being able to read my site, which uses valid CSS, when his site is almost completely unreadable in IE5/Mac thanks to his valid CSS.)

I’ve been trying to come up with a name for this font-sizing approach.  “Baseline sizing” is too evocative of the baseline used to lay out lines of text, which has nothing to do with this technique.  “Body sizing” sounds like it’s a weight-loss program.  “Right sizing” probably hits too close to home for a lot of unemployed IT folks.  Something to mull over as I nurse back muscles sore from shoveling wet, heavy snow and ice.

• Try This On For Size was published on Monday, February 24th, 2003.
• It was assigned to the CSS category.
• There have been no replies.

A redesigned Netscape DevEdge has been launched.  Look, ma, no tables.  Well, hardly any, and none in the basic design.  I was a primary project manager for this one, and the design is a from-scratch effort.  It’s nothing visually groundbreaking, and of course using positioning for a major site has been done, but we’ve gone a step further into using positioning to make the design come together.  The site didn’t quite validate at launch thanks to some deeply stupid oversights on my part, but hopefully they’ll have been fixed by the time you read this entry.

As for the design approach we took… that’s a subject for another day, and also the subject of an article I wrote.  I predict that we’ll draw fire for using HTML 4.01 Transitional, for not validating when we launched, for our font sizing approach, and for our dropdown menus.  On the other hand, we’ll probably draw praise for making the markup accessible (once one of my stupid mistakes is fixed), for using CSS in a sophisticated manner, for pushing the envelope in reasonable ways, and for our dropdown menus.  For myself, I’m very much satisfied with and proud of the result, and very grateful for all the effort and help I got from the other members of the team.

On a less important but possibly more amusing front, yesterday I hacked together a color-blending tool after Matt Haughey asked on Webdesign-L how to calculate the midpoint between two colors, and Steve Champeon explained how to do it in some detail.  The JavaScript is no doubt inefficient and clumsy, the tool may not work in your browser, and for all I know it will lock up your computer.  It was just a quick hack.  Well, not quick, actually; I’m not very skilled at JavaScript.  Enjoy it, or don’t, as you like.  Just don’t expect me to fix or add anything unless you mail me the code needed to do whatever you want the tool to do.

Lucas Gonze over the O’Reilly Network mentioned a fascinating paper on “cascade attacks” and how they can be used to take down a distributed network.  So the Internet can suffer cascade failure, eh?  I wonder how much effort would be required to take down the Internet’s starboard power coupling.  Or, worse yet, trigger a coolant leak.

It’s been revealed that the blurry, grainy image of the Space Shuttle Columbia wasn’t taken using any advanced telescopes or military systems after all, but three engineers who used some off-the-shelf parts to put together a personal experiment.  CNN says: ‘Hi-tech’ shuttle pic really low-tech.  Let’s think about that for a second.  Three guys took an eleven-year-old Macintosh, hooked it up to a telescope that probably cost no more than a couple hundred dollars, and took a picture of an object almost 40 miles away moving 18 times the speed of sound.  That’s low-tech?  The fact that you can even recognize the object they imaged is astounding.  Hell, the fact that they imaged anything at all is astounding.  No criticism of the three men intended; I’m sure they’re brilliant guys who know what they’re doing.  But think about it!

I refer to moments like this as “technological vertigo.”  They’re those points where you suddenly come to a dead halt while you realize the incredible complexity of the world, and just how much we take for granted.  For that one moment, you stop taking it for granted.  Here’s an example: a couple of years ago, I was driving south through suburban Columbus.  In the back yard of a house just off the interstate, I spotted an old satellite dish lying on its side, obviously no longer in use.  Then it hit me: whoever lived there once had the ability to receive information from orbit, and decided to throw it away.  Their garbage was so much more advanced than anything their parents had ever even envisioned that the gap was barely comprehensible.  Any general in the Second World War would have given anything, including men’s lives, to have the kind of communication capability that now lay discarded in somebody’s back yard.

The even more remarkable thing about this trashed satellite dish is that there was nothing remarkable about it.  So somebody threw out an old satellite dish—so what?  They can always get another one, and one that’s a lot smaller, better, and more capable than the piece of junk they tossed, right?

And that is perhaps the most incredible part of it all.

• The Nature of Progress was published on Thursday, February 13th, 2003.
• It was assigned to the CSS, Redesign, Technovertigo, and Tools categories.
• There have been no replies.

Fabian Valkenburg sent in e-mail letting me know that my comments on Opera 7’s CSS support got used in the talkback to an evolt.org article, and that I’m wrong about Opera 7’s display of the dates on this page being a bug.  As it turns out, the answer to that is “maybe.”

First, a word on how I set up the title and date styling in the basic site theme.  Both are contained in successive h5 elements, each with an appropriate class value (title and date, in fact).  I make the title inline so I can wrap a border around it that “shrink-wraps” the text.  Then, since I want to move it upward, I relatively position it upward two-third of an em.  Since it has been relatively positioned, for the purposes of laying out other elements, browsers should act as though the element wasn’t positioned at all.  (See CSS2:9.4.3 for details.)  So, in that sense, the relative positioning should have no impact on how the date is laid out, and in fact it doesn’t in the browsers I tested; I only brought it up to show that the title wasn’t floated.  On the other hand, I float the date to the right and right-align its text.  Since I’m floating the date to the right from below the place where the date’s h5 would have been (because the date comes after the title), I give it a negative top margin to pull it upward, so that it sits just below the top border on the entry.

Now here’s where things get fuzzy.  According to CSS2:9.5.1, the outer top edge of a float may not be any higher than the top of preceding float or block boxes.  It doesn’t say anything about inline boxes.  Remember that with CSS, it’s possible to have inline and block boxes for sibling elements.  So the effect of that portion of CSS2 is to allow floats to ignore preceding inline boxes when they float.  Or not ignore them, as the case may be.

Let me frame it another way: here’s a testcase that shows h3 and h4 elements in the normal flow, and then with the h4 elements floated.  To my way of thinking, both floats should sit below the h3 elements that precede them, regardless of the type of box those h3 elements generate.  This is because my conception of floats is that they start from their place in the normal flow, and then move to the right (or left).  From there, they move downward if they must, but not up.  Unless I give them a negative top margin to move them up, of course.

The behavior I just described is what IE5.5/Win and Gecko-based browsers do, to pick two examples.  But what Opera 7 (and, in many cases, IE5/Mac) does is not a bug, because it doesn’t violate the CSS specification, so I retract my earlier statement.  I believe that what it does is not what  site authors would want, but it isn’t wrong.  Thanks to the wording in CSS2:9.5.1, neither are the browsers that don’t agree with Opera 7 wrong, although I would accept that they’re further away from the letter of the specification.  Whether or not they violate its spirit isn’t clear, and it’s in cases like this that browsers tend to do whatever their programmers thought best.

So what we have here is a gray area in which I believe the letter and spirit of CSS are pulling in different directions, and browsers are splitting over which path they choose.  Hopefully CSS2.1 will be clarified to address what should happen, and we won’t have to bother arguing about who’s doing what better in which way for whom.

As for css/edge, yes, I hear you.  Opera 7 gets most or all of the demos correct, and may in fact reveal some erroneous assumptions on my part in the pure CSS menus demo (or maybe not; I don’t know yet).  When I get time to actually run Opera 7 through all the demos and evaluate its behavior, I’ll see if I can get the support information updated.  Unless of course I finally decide that the support information is becoming too much trouble to have around, in which case I’ll update it into oblivion.  It never really helped prevent people from misrepresenting what the demos were supposed to do anyway.

Personally, I like Opera 7 (or did once I switched its skin to the classic look), and my comments weren’t meant to cast it into the junkbin of bad browsers.  If I were a Windows user, I’d probably use it a lot more than I do.  There are rough edges, as with any browser, but overall it’s quite good—I think I said that already, but some people don’t seem to have heard that part.  Opera 7 handles a site redesign project I’m working on a lot better than Opera 6 does, I’ll say that much.

• The Silence of the Fat Lady was published on Saturday, February 8th, 2003.
• It was assigned to the Browsers, CSS, and Standards categories.
• There have been no replies.

Just a quick reminder that the WThRemix competition closes in eleven days.  Here’s your chance to remake the face of the W3C Web site, and maybe win some peer accolades and a few prizes along the way.  I’ll be impressed by any entry that gives the W3C site a bold new look without changing its markup structure at all, personally, but I’m not a judge so impressing me won’t get you anywhere in the competition.

Did I mention that the different thematic choices for adactio.com are really, really impressive when you visit the author’s journal?

I somehow missed the announcement of the winners of AllTheWeb‘s restyling competition, so I’m going to mention now that the contest is over and the winners’ entries publicly available.  There are some really good entries.  I worked (remotely) with one of the runners-up when he was an intern at Netscape last year.  Speaking of which, I hope to have some good (or at least interesting) news in the near future.

I’m off to be a geek or a guru, or maybe even both, at Tri-C’s Western campus tonight, where I’ll talk about (among other things) how CSS can be used to restyle any site, regardless of what the site author has to say about it.  Hope to see you there!

• Restyling Madness! was published on Thursday, February 6th, 2003.
• It was assigned to the CSS and Speaking categories.
• There have been no replies.

I’ve watched word of the Web Standards Meetup work its way through various blogs like a slow conceptual pulse, so I may as well keep it going.  I seem to be the only one in my area signed up so far, and I’m slightly bummed that there are cool people like Nick and Molly signed up in cities far away from me.  Of course it was only after I signed up that I realized the meetup is the same night I’m presenting at a local community college, so I’d be incredibly late or in absentia anyway.  Of course, people interested in standards could come meet at the talk, and then we could all go to a nearby place afterwards.  It’s an idea.  It might even be a good one.  You be the judge.

I’d been toying with the idea of trying to get local Web folks to assemble for socialization and (human-relation) networking for a while now, but thanks to Meetup I don’t have to undertake the organizational effort.  That’s pretty cool.  It just makes sense someone named Eric would be involved in something that cool.  We’re everywhere, and everywhere we go is cool.  That’s the kind of cool we are.

Some time yesterday, someone asked how my new book was coming along.  I asked which one they meant.  It turned out they meant Eric Meyer on CSS, and that they’d spotted a mention of it on MozillaZine.  So I went over to see what they had to say, and discovered they were saying that evolt had posted an interview with me last Saturday.  Well, shoot the horse and slap me silly!  I’m always the last to know.

Actually, said interview was already available in Italian, and I forgot to mention that fact until now.  I sense a karmic balancing here.

So, Opera 7.  It’s out, and yes, it does wonderfully well on css/edge, so you can all stop e-mailing me now.  I’ll update the demo pages one of these days to say so, I promise.  Just not today.  Opera 7 still suffers from some disappointing CSS bugs, though.  One is on this page right here, assuming you’re using the default page stylesheet or one of its variants.  The entry dates should be appearing below the horizontal line at the top of each entry, not above the borders.  Also, on my Speaking page, the :first-line underlining of li children of ul#upcoming is being applied to more content than it should.  Neither is really tragic, but they are a touch annoying.  Opera 7 also has some problems with negative text-indent values on block-level links; it seems to be flipping the sign on the value, so that it’s positive.  But I could be wrong about that, since I haven’t invested a lot of time in detailed analysis of the behavior.

There have also been some changes that make OperaShow do odd things to some of the files available on my Speaking page.  It’s probably a case of my writing my projection-media CSS to cater to Opera 6 bugs, and Opera 7 having fixed said bugs.  I probably won’t get around to fixing up old talk files, so if you really want to see them as first written, keep a copy of Opera 6 around.  Hey, at least you can have multiple versions of Opera on your computer, just like most browsers.

These are just the things I’ve noticed from a little surfing around.  To a degree, I’m just picking nits, but I also wonder how many other “combinatorial” problems I’m going to encounter.  It’s one thing to pass a test suite, which is a set of controlled circumstances that is easily predictable.  Dealing with the wonderfully wacky ways authors like to combine bits of CSS in pursuit of a given effect is something else entirely.

Is Opera 7 better than Opera 6?  Yes.  Does it have a good CSS engine?  Yes.  Is it the best CSS engine I’ve seen?  No.  Close, but not quite.

On a completely different front, the interface on this medical detector is really cool, not to mention the technology itself is pretty nifty.  Give ’em about 15 years to wedge in more advanced scanners and extra features, and we’ll have tricorders after all.

• Increasing Circulation was published on Wednesday, January 29th, 2003.
• It was assigned to the CSS and Personal categories.
• There have been no replies.

Lists seem to be my topic-of-the-moment, but this is about a different kind of list.  It’s hard to believe this, but it was a year ago today that the mailing list css-discuss was launched.  By my slightly rough count, the list carried 17,455 messages to its subscribers in calendar year 2002, and has nearly reached 19,000 messages total.  Just over one thousand of those messages were sent in the first eight days alone, which sent a lot of early subscribers running away in horror, and caused me to wonder if I was going to be crushed by the flood.  Due to overloading problems, we had to switch servers twice before finally migrating to the current home, graciously provided to us by evolt UK.  The list averages about fifty messages per day, both at present and as a lifetime average,.  Even though we moved the list to a new server and required people to actively re-join the list at that time, it has nearly 1,500 subscribed accounts.

I’ve worked hard to keep it a practical list with a high degree of signal, and I’d like to think those efforts have paid off.  We have the occasional hiccup, and every now and again a thread gets out of hand, but overall I think the list has been a lot more worthy than not.

I’d like to extend my deepest thanks to John Allsopp of Western Civilisation, which provided the list its first home; to John Handelaar of Userfrenzy and evolt UK, who manages the server where the list now resides; and to all the members of the css-discuss community, who make it useful through their contributions, discussions, and continued respect for one another and the list itself.  No community can be truly great without active support from its members, and the members of that list are very active in making it the kind of place I’d hoped it would be.  My thanks to you, one and all.

• A List, A Year, A Look Back was published on Friday, January 24th, 2003.
• It was assigned to the CSS category.
• There have been no replies.

Douglas Bowman ruminates over the use of list elements (i.e., <ul> and <ol>) as the basis for navigation links, tabbed interfaces, weblogs, and just stuff in general.  Is it okay to use an unordered list to hold the lists that drive your site?  Should a weblog just be an enormous ordered list?  If you do those things, does the semantic meaning of the list change to the point that it’s no longer really a list?

Well, kell co-ink-e-dink!  Tonight’s talk at COMMUG deals almost entirely with ways to take lists and restyle them to get panels, tabs, flowchart-like structures… pretty much everything Doug was talking about.  I’d even been planning to talk a bit about the semantic joyride such approaches can mean, at least to some people.

So here’s the short version of what I think: looked at a certain way, pretty much everything can be represented as a list.  The U.S. Census, the Solar system, my family tree, a restaurant menu, the stuff I did yesterday, all the friends I’ve ever had and lost—these can all be represented as a list, or a list of lists.  So the question isn’t really whether we should be putting all this stuff into lists.  The question (at least at this stage of the game) is whether or not the markup structure meets the job, and helps with accessibility concerns.

Now, should we have markup structures that meet the jobs more closely?  Maybe.  XHTML 2.0 has the <nl> (nestednavigation list) structure, which comes closer to making the markup name match the structure’s intended role.  I’m not convinced this is necessary; it’s already possible to just take nested lists and turn them into menu systems using CSS, assuming a sufficiently capable user agent.  It’s still a topic worth consideration and exploration.

• Listing Toward the Future was published on Thursday, January 23rd, 2003.
• It was assigned to the CSS category.
• There have been no replies.

So last night Kat and I headed down to the Cinematheque to meet up with Ferrett, Gini, and Jeff to see Jesus Christ Vampire Hunter.  Wow!  It was… well, it was… I mean to say, it… it’s not really describable.  But it was quite funny.  I might pick it up on DVD if it ever comes available.  As Ferrett said on the way out, “Oh, I can’t wait for the commentary track for that one.”

Meantime, the recent ruling on Eldred v. Ashcroft sparked a lot of debate on a computer book authors list to which I belong.  I stayed out of it for a while, because I didn’t have much to say, and then suddenly—as is often my wont—I realized I had something to say after all.  So I said it, and I figured, what the heck, I could say it here too.  So if you want to know what I think about copyright terms, feel free to read away.  If not, no sweat.  It’s automatically copyrighted either way, as it happens, and now nobody else can say the same thing for more than a century, or something like that.  How much sense does that make?

I still don’t know why I think so, but this is darned cool.  I’m probably just jealous I didn’t think of it first.

• Oh, There’ll Be Plenty was published on Sunday, January 19th, 2003.
• It was assigned to the CSS, Personal, and Politics categories.
• There have been no replies.