Posts in the CSS Category

Okay, so I can’t count.  I claimed yesterday that there were three new XFN tools, and then listed four.  Plus I missed one.  So… among our many XFN tools are rubhub; Rubhub It; Autoxfn; the MT template; Daniel Glazman‘s Nvu, which supports the editing of XFN values on links as part of the UI; and an almost fanatical devotion to the Pope.

Based on the feedback to my question yesterday, it seems the #1 reason to link to your Amazon wish list is to help out family members who can’t seem to remember what you like whenever a birthday rolls around.  The other reason given was to provide a window into your interests, which is felt to help foster a sense of familiarity in what can sometimes seem an impersonal medium.  Fair enough.  I did something along those lines when I added the “Reading” feature (with archive) to my personal page.  Perhaps the only real difference is that I’m giving a current and backward glace at my interests, whereas the wish list link provides a forward look.

A couple of people also wrote to say that they actually have had random passers-by send them something off of the wish list, sometimes in thanks for a favor they’d done online, and that it was pretty neat.  I’m not sure I’d feel the same way, but I thought I’d pass along their feelings on the matter.

Speaking of passing things along, I promised that I’d summarize the suggestions I received regarding books presenting reasonable arguments for the conservative point of view.  Here’s the summary.

• Letters to a Young Conservative by Dinesh D’Souza
• Radical Son by David Horowitz
• The Content of Our Character by Shelby Steele
• The Death of Right and Wrong by Tammy Bruce
• First Principles: A Primer of Ideas for the College-Bound Student by Hugh Hewitt
• The Revenge of Conscience: Politics and the Fall of Man by J. Budziszewski
• A National Party No More: The Conscience of a Conservative Democrat by Zell Miller

I also received e-mail from liberals who had been looking at the same issue, and wanted to mention some books they thought were good.  They are:

• Conflict of Visions by Thomas Sowell (for a look at both sides)
• The 2% Solution by Matthew Miller
• The Politics of Rich and Poor and other books by Kevin Philips

Please note that I have not read any of the books I just listed, and so am neither recommending nor condemning any of them.  Similarly, I’m passing along an unchecked recommendation for The Weekly Standard, not to be confused with The Weekly Standards.

Those of you more interested in the latter of those two links will probably also be interested in the Web Standards Awards, with three awards to be given every month.  You can submit any site for consideration, whether it be your work or someone else’s, but be sure to check the competition criteria first.  The first three winners are already listed on the site.  Check them out—there’s some great work there—and then go check out Wasabicube.  It’s elegant, lovely, and I love the current-page effect in the sidebar.  Now I want to redesign meyerweb again, except if I did it would be a ripoff of Peter’s design.  So I’d probably better refrain.

• Confess! Confess! was published on Wednesday, February 11th, 2004.
• It was assigned to the CSS, Politics, and XFN categories.
• There have been no replies.

According to a correspondent, the Redesign Watch and Platelets columns don’t actually sit side by side in Linux, but instead the Platelets drop down to start after the end of Redesign Watch.  This is, apparently, consistent across his various Linux browsers, including IE/Win (using crossover).  I’m not sure I can explain this.  The widths of the two divs that contain those modules are set to 9.5em and 5.5em, respectively, and they have neither margins nor padding (nor side borders).  Add them together, and you get 15em, the exact width value of div#extra.  I was going to claim a rounding error, except it’s happening in all his browsers, so now I’m thinking maybe a font thing.  I might suspect that the Platelets float is expanding its width to enclose the content, except explicit-width floats shouldn’t change width even if its content won’t fit.  IE/Win might do that, but I wouldn’t expect it from Firebird/Mozilla, which apparently also has the problem.

As with any experiment, the design here will probably slowly evolve as I run into such things.  As an example, I may adjust the widths of the two modules slightly, perhaps to 9.25em and 5.75em, just to see if it causes more problems or not.  I knew that, in setting widths so closely to each other and to their inherent content widths, I was taking a risk.  I don’t see the risk as any greater than using a table, though: if I did drop those modules into a two-cell table, then the content might push the table to be wider, thus having it stick out of the sidebar entirely.  That would be fairly awful.  So, as usual, it’s all about tradeoffs.  Here, I traded away “always stay next to each other” to get “always stay within the sidebar.”

As silly as this progression of creeping fixes might seem, it’s nothing compared to what Morbus Iff went through in an attempt to make Panther act the way he wanted it to act, and indeed the way Jaguar acted.  I suspect there are similar tales of woe from any major power user of any operating system, or any technology for that matter.  The more you know, the easier it is to get yourself trapped by unexpected changes.

For example, there have been some problems with the CSS validator of late; Mr. Zeldman has all the details.  As a result, there’s been some confusion here and there about the validity of the Box Model Hack.  Let me be clear up front: the hack is valid.  It always was, and always will be unless the CSS grammar undergoes some fairly radical changes.  This is an entirely different question than whether or not you should use it, or any other hack—that’s much less clear.  I’m not saying that the hack is Good or Bad.  I’m saying that it is completely valid according to the CSS grammar.

Historical note: the Box Model Hack was derived from test p.twentyb in section 7.1 of the CSS1 Test Suite.

Here’s the heart of the matter, the part that causes most people to assume that the hack isn’t valid:

voice-family: ""}"";

I know, it looks like a burst of line noise, or maybe a regexp (but I repeat myself).  It’s still quite valid.  It’s an attempt to supply a voice-family value of "}", while quoting that value.  This is analagous to:

font-family: "New Century Schoolbook";

Now suppose we had a font family named Joe "Average" Public, with the quotes being a part of the name.  We’d likely want to quote the name when making it part of a value.  Thus, we’d need to escape the quotation marks that are in the family name itself, like so:

font-family: "Joe "Average" Public";

In order to keep the quotes in the name from breaking the value up, they’ve been escaped using a back-slash.  That’s part of the CSS grammar.  In that light, then, reconsider the name "}".  If it’s to be quoted, then the quotes in the family name have to be escaped.  Thus, highlighted part of the following example is the escaped voice family name:

voice-family: ""}"";

Therefore: a valid hack.  Again, I’m making no claims that using the hack, or indeed any hack, is a good idea or a bad idea.  I just wanted to make clear how this particular hack works, and that it conforms fully to the CSS grammar.

This is at any rate better than the recent FrontPage ad that’s making the rounds of standards-aware folks.  I’ll just point to Dave Shea‘s post, which contains both a link to the ad in question and a useful hint to understanding why it’s so funny.

• It’s Always Something Else was published on Saturday, February 7th, 2004.
• It was assigned to the CSS and Standards categories.
• There have been no replies.

Anyone visiting the main page of meyerweb with IE6 in the last fifteen hours (it’s now about 1300 EST) may have noticed the sidebar was intruding into the main content column, and generally looking icky.  The problem has now been fixed.  It happened thanks to, of all things, a bug in IE/Win’s rendering engine.  (Gasp! No!  How can this be?)

Here’s what happened.  I added the “Redesign Watch” and “Platelets” lists to the sidebar, which is actually marked with an id of extra in the source because it’s what I regard as extra material; it comes after the page’s content in the source.  I wanted the two lists to be side by side, and here’s how I originally did it:

#extra #redesigns {float: left; width: 9.5em;}
#extra #platewatch {margin-left: 9.5em;}

Simple enough, or so you’d think.  Instead, this caused IE6 to push the sidebar about half an em to the left, which is what led to the overlap.  The (previous) link at the bottom of the Platelets column was also way out of joint.  If I removed the two lists, then everything went back to normal.  So clearly IE/Win was having trouble with the floats, or perhaps with floats inside a positioned element.  At any rate, it was the new material that was triggering a bug.

I seriously considered doing this:

#extra>#redesigns {float: left; width: 9.5em;}
#extra>#platewatch {margin-left: 9.5em;}

By using the child-selection combinator (>), which IE/Win doesn’t understand, I could have entirely hidden both rules from IE/Win.  That would have meant the Redesign Watch and Platelets lists would simply follow one another, as Destinations does Navigation, because none of the floating or margin-modification would have been allowed to confuse Trident (IE/Win’s layout engine).  This solution, while practical, didn’t really satify me, so I decided to try another approach.  Perhaps floating both elements will be sufficient, I thought.  So:

#extra #redesigns {float: left; width: 9.5em;}
#extra #platewatch {float: right; width: 5.5em;}

It worked: the two lists ended up side by side as I wished, and the sidebar was no longer pushing its way into the main content column.

This should not have been a real surprise to me, as I’d been aware that IE/Win has trouble with floats overlapping the margins of normal-flow elements that follow them in the document source.  I just forgot, which I seem to do pretty regularly—it’s the one IE/Win bug I can’t seem to permanently store in long-term memory.  I have some hopes that writing it up will help affix it in my brain, in addition to helping out anyone who’s had similar problems with their layouts.

Thanks to The Ferrett for pointing out the layout problem, so I could track down and fix it.  I hadn’t sworn at IE enough this week anyway.

I also rediscovered Explorer’s lack of support for the keyword inherit.  So the “previous” link in the Platelets column will use a monospace font in IE.  Other browsers will properly see it in the site’s default font (Arial, as of this writing).  I could write a rule or two to make the display more visually consistent, but I decided against it.  In this case, I’ll accept the visual evidence of limitations in IE over needlessly complicating my CSS.

Oh, by the way… did you notice that I added HTML+CSS redesign and license-plate information to the sidebar?  My personal page also has a new sidebar feature, one which will be of particular interest to anyone who wants to know what I’m reading in my few spare moments.  These are all the result of my working on creating “blogmark”-type data structures and pushing them live via XSLT (<shudder />).  I haven’t bothered to set up individual RSS feeds for them, but it wouldn’t be difficult.  I may extend this to a real “blogmark” area where I point at stuff that I find interesting, but don’t want to spend time writing about.  Most of the things I’d be likely to link I’d be getting from other people’s blogmarks anyway, and somehow the process of taking someone else’s blogmark and turning it into a local blogmark just seems silly.

• It’s Always Something was published on Thursday, February 5th, 2004.
• It was assigned to the CSS and Redesign categories.
• There have been no replies.

As any visitor can easily see, the new design is in place and seems to be working smoothly.  In conjunction with the redesign, I’ve reworked the post structures and permanent URIs a bit.  The old URIs won’t change (’cause, you know, they’re cool) but moving forward, I’ve tightened the URIs up a bit.  In this, I followed Tantek’s lead to a large degree.  Generally my posts won’t include a timecode since it’s highly unlikely that I’ll post more than once per day.  (Shoot, any more I’m lucky to post more than once per week.)  If I ever do need a timecode for a post, it will be simple enough to add; my XSLT is already set up to handle it.

You may also have noticed that the posts previous to today have disappeared from meyerweb’s home page, and from the RSS feeds.  This happened because I rewrote some of the XSLT and changed the base XML structure of the archives, and trying to merge the old structure and transformations with the new ones was just too annoying for words.  So I’ve basically hit the reset button on the posts, although the old posts are still available from the archives, just as they always were.  It’s a temporary situation at best, since both the home page and RSS feeds will fill up as I write more entries.

As for the masthead image you can see today, it’s the same one I used for the Eos theme in the previous design, thus giving some minor sense of continuity to the process.  (Said image is the intellectual property of Tantek Çelik and used with his permission, by the way.)  The masthead image won’t remain constant—I’m planning to change it every week or two, with future images coming from photographs I’ve taken.  I already have thirteen ready to go, culled from the two thousand or so images in my iPhoto library.  I imagine that eventually I’ll add the ability to pick a favorite theme, or to pick one at random, or something.  I might even add the ability for you to supply the URI of an image you particularly like, although that seems a little obscure.  You can already do it with a user stylesheet anyway, since the site’s CSS signature (www-meyerweb-com) remains fully in place.  For those who feel the urge, the masthead images are 1280 by 128 pixels in size, and I’ve tried to keep them to 25KB or less.

Gradual changes will probably continue to happen for a while, in fact.  The sidebar content will be developed over time, for example.  I may also slowly enhance the design from its current sparse styling.  I doubt it’ll change a whole lot, to be honest, but I may from time to time test out new techniques or visual effects.

Let’s see, what else… oh yes.  If you’re using Mozilla or Safari (and maybe Opera), notice what happens when you mouse over the title of the post.  That’s generated content, not a background image, which is why Explorer doesn’t get the same effect.  This fails to bother me, since it’s more fun visual frosting than anything critical.  What’s interesting to note is that it doesn’t work in Safari 1.1 unless the border is changed in some way.  If the hover effect is removed, no generated content.  I wonder if that’s been fixed in the current internal builds.

The sidebar is absolutely positioned, and the gray area around the page content is the background of the html element (which means the black borders around the content are set for the body element).  The sidebar assembly was reworked so that it’s easy to add different content for different areas of the site.  For example, the Destinations on Kat’s page are different from those in my area of the site.  I haven’t done a lot with this capability yet, but probably will as time goes on.

That’s about it for now.  I’ll get back to the usual ramblings tomorrow.

• Rebirth was published on Sunday, February 1st, 2004.
• It was assigned to the CSS and Redesign categories.
• There have been no replies.

At the Web Design Meetup last week, Warren expressed annoyance that there are a limited number of fraction character entities.  I pointed out that you can use MathML to represent any fraction you like, but of course it requires a browser that supports MathML.  Those are kind of rare.

So absent MathML, it’s easy to get a nice presentation of, say, one quarter (¼, a.k.a. character entity ¼), but how do you get a similarly nice rendering of thirteen thirty-seconds?  As it turns out, you can at least get close with a bit of structural massaging.  (That sounds so much better than “structural hacking,” doesn’t it?)  Here’s what I came up with:

span.frac sup, span.frac sub {font-size: 75%;
  vertical-align: baseline;
  position: relative;}
span.frac sup {top: -0.5em; left: 0.15em;}
span.frac sub {left: -0.15em;}

17 <span class="frac"><sup>13</sup><b>/</b><sub>32</sub></span>

That results in the following, which I recreated using inline styles just to make life easier when I archive this post:

17 ¹³/₃₂

Not too bad, at least in Safari, Mozilla, and IE5/Mac, but not great.  In his own efforts along these lines, Warren uncovered the fraction-slash character entity (⁄), which could help improve the result.  I also notice that my numbers are bigger than the numbers in the original entity.  So I adjusted my styles, with the following result.

span.frac sup, span.frac sub {font-size: 60%;
  font-weight: bold;
  vertical-align: baseline;
  position: relative;}
span.frac sup {top: -0.5em; left: 0.1em;}

17 ¹³⁄₃₂

So let’s compare the one-quarter entity to the styled version.

¼   ¹⁄₄

There are font-family differences, I admit, but they’re pretty close to each other in the browsers I mentioned before.

The problem, really, is the markup involved, but I don’t see how one can really reduce it any further.  MathML’s representation of fractions isn’t noticeably less weighty, really, not even counting possibly required namespacing, which I’m not going to include here:

<mfrac><mi>1</mi><mrow>4</mrow></mfrac>

I suppose that if I wanted to show arbitrary fractions a lot, I could represent them in MathML and then transform the math markup into HTML before delivering it to browsers.  I don’t have a lot of need for such fractions, at least not so far, but it was an interesting exercise.

Now for a little cleanup with regard to previous posts.

• Chuq pointed out that iLife was never totally free, but that Apple was allowing updates to old versions at no cost.  In my case, iLife appeared to be free because it came installed on my OS X laptop, so I never overtly surrendered money for the product.  I suppose the cost is somehow built into the cost of the operating system.  Regardless, I still think that there was a bit of baiting and switching in letting people download major upgrades at no cost and then closing the gate.  I guess what I want is consistency; I didn’t realize I was benefitting from lax license enforcement, if that’s what it was.  I thought Apple was just making decent tools available for free to Mac users in order to draw more people to the Mac.  That would make some business sense, even if it isn’t what they were doing.  After all, I haven’t heard any plans to charge for upgrades to iTunes, and I don’t expect that I will.  Apple may be many things, but grossly stupid isn’t generally one of them.

  At any rate, I’d still be interested in paying for just an iPhoto upgrade, especially since I looked at some programs readers e-mailed me to suggest, and they were all either not what I wanted, or too darned expensive.  I imagine there are people who would pay to download GarageBand as a standalone, for example.

• It turns out that there are a number of demonstrations of using behaviors to get PNG transparency in IE/Win.  Here are a few that people sent me:

  • PNG Behavior Demo from WebFX
  • Sleight from Youngpup
  • Explorer versus PNG (AlphaImageLoader) which offers the most complete explanation of what’s happening, but employs language that might not be work-safe—not a condemnation, just a warning

  I’m sure there must be others.  Google could tell me, but I feel overloaded already.

Carolyn turns six weeks old tomorrow.  I’ll have to find a good picture to post, especially since so many people have asked for them.  She’ll get her own page sooner or later, but I’ve had other and much more pressing things on my plate.  As long as I have it ready by the time she wants to start blogging…

• Fractional Styles was published on Wednesday, January 14th, 2004.
• It was assigned to the CSS, Mac, and Standards categories.
• There have been no replies.

The e-mail backlog has finally forced me to do something I’ve long resisted: the site now has an FAQ.  I thought about calling it a QAF (Questions Frequently Asked) or maybe an FRE (Frequently Received E-mails).  But in the end the weight of tradition got me to go with the traditional nomenclature.  If you’re thinking of sending me e-mail, please read the FAQ first to see if the answer is there.  As much as I love correspondence, I just can’t keep up any more.  In fact, I couldn’t even before Carolyn arrived, and so now I’m doubly unable to keep up.  Hopefully the FAQ will help, just a bit.  Thanks for your collective understanding.

This is truly excellent: arbitrary-element hovering in IE/Win.  In other words, stuff like pure CSS menus and such can actually be used in real-world designs, thus reaping the benefits of dramatically reduced markup weight.  The approach the behaviors take reminds me a lot of what we did to get the Netscape DevEdge menus working in IE/Win, except we did it in JavaScript, which may have made our technique a little weightier on the back end.  Either way, they’re both excellent solutions.

There’s a lot more gold to mine in the behaviors/script/structural markup vein, I suspect; the melding of IE-specific behaviors with lightweight scripts and CSS could lead us to a great many advances in standards-oriented design.  While it would be nice to see IE advancing so that we didn’t need these kinds of solutions, at least they exist.  Here’s my short, off-the-cuff wishlist for things for which we can hopefully use behaviors to replicate CSS2 functionality:

• Support for generated content; counters would be a truly awesome bonus
• Fixing the box model in versions of IE previous to IE6
• Better (read: more smoothly scrolling) support for fixed-position elements and fixed-attachment backgrounds than current scripts provide

I think there’s a way to use behaviors to get alpha-channel support in PNGs, too.  Can anyone confirm that?  If not, it’s something to investigate.

Now on to slightly more surreal matters.  Sure, I’m fairly well known as an expert in CSS and Web standards, and some of you know that I do a weekly Big Band-era radio show, but how many of you were aware of my career as a shoe designer?  Doug Bowman wrote to let me know that Matt Haughey had spilled the beans, so I’ll own up to it here.

Okay, not really.  But if you go to the Medium Footwear site, wait for the Flash interface to load, hit “Collections,” and then click anywhere on the splash page, you’ll see—and I swear that, like Dave Barry, I am not making this up— the Eric Meyer Collection.  There are nine different models, and the really funny punchline to the whole affair is this: guess which of those shoe styles I like enough to consider buying?  As it turns out, the “Structuralist” design.  Seriously.

• Running Just To Stay In Place was published on Monday, January 5th, 2004.
• It was assigned to the Browsers, CSS, and Humor categories.
• There have been no replies.

As the calendar turns to another year, I’ve reached a major goal.  I just now finished writing the preface and dedication for the second edition of Cascading Style Sheets: The Definitive Guide, which means that the primary writing is fully and completely done.  Some chapters have already been through technical review, copyedit, and author review, and are moving through production.  Others are queued up for me to deal with in the next several days.  So it looks very much like we should be able to put the book on shelves, and into your hands, before summer gets underway.  This is, for me, a major relief.

As for the sequel to Eric Meyer on CSS, that’s suffered some setbacks due to Carolyn’s arrival, so I’m not sure when it will be finished and published.  Half the projects are already written, and the sixth has the working files all set up.  That leaves just a few more to write.  I’m hoping to get them finished before January is done, but I’m feeling less and less optimistic about meeting that goal.  We’ll see what happens.

Speaking of Carolyn, she’s suffering through her first cold, so we stayed home last night.  There are certainly worse ways to spend a New Year’s Eve than with your wife, new daughter, and a home-cooked meal.  We didn’t even bother to watch the ball drop, although the shouted countdowns from our various neighbors let us know exactly when the new Gregorian year began.

As Kat and I lay in bed last night, Carolyn miserably gurgling and wheezing between us, I kept saying to myself, “It’s just another day.”  There was something about the change to 2004 that hit me hard, a realization that this is the first year in which Mom has always been dead.  Throughout 2003, even though she was gone, she’d been a part of that year.  When that last digit changed, artificial though the division of time might be, there was suddenly a sense that I was farther away from Mom, that I’d crossed a boundary that was suddenly like a wall between us.

But it is, in the end, just another day.  Mom doesn’t have to be any further away from me than she was yesterday, or the day before.  She is always as close as I choose to allow, as close as my memories of her will permit.

• Turning Points was published on Thursday, January 1st, 2004.
• It was assigned to the Books, CSS, Personal, and Writing categories.
• There have been no replies.

I feel kind of honored whenever I find out a browser’s been altered (hopefully fixed) as a result of something I’ve done.  Check out point (20) in Dave Hyatt’s recent Safari progress update.  Glee!  I could also feel good about point (19), which I reported as a bug a while back, but I apparently they’d known about it long before I noticed it.  To see that bug in action, drop by the XFN profile document.

My optimism on Sunday regarding Libya may have been misplaced, it seems—or was it?  It’s hard to tell, and CNN isn’t much help, since it’s provided information on both sides of the fence.  In a summation article regarding an interview Gadhafi gave to CNN, it was stated:

Asked about his decision, Gadhafi acknowledged that the Iraq war may have influenced him, but he insisted he wanted to focus on the “positive.”

For that matter, the title of the article was “Gadhafi: Iraq war may have influenced WMD decision.”  That was on Monday.  I went looking for a full transcript, because I wanted to see exactly what was said, but didn’t find one.  When I went back again to look on Tuesday, the article had been updated and did not contain the above paragraph.  It instead stated:

Asked about his decision to dismantle programs and whether the Iraq war or the capture of former Iraqi leader Saddam Hussein may have influenced him, Gadhafi questioned why Iraq had to be his role model.

The title had been updated as well, now to “Gadhafi hopes for new era of U.S.-Libya relations.”  Still no transcript.

Notice that in neither case was Gadhafi’s answer on the subject of the war’s influence actually quoted.  So in the absence of video of that segment of the interview, or else a detailed transcript, I’m left wondering just what the hell he really said, and whether or not I should retract some of the things I said on Sunday.

So I’ll punt on the whole thing, and just share The Hoser with everyone.  Merry Christmas, eh?

• The Fix Is In was published on Wednesday, December 24th, 2003.
• It was assigned to the CSS and Politics categories.
• There have been no replies.