Posts in the CSS Category

Remember my recently posted conversation with Molly?  Boy, am I ever feelin’ that today.  In spades.

Some of you have noticed earlier today that things were presentationally unstable.  Depending on when you dropped by, you would have seen raw document presentation with no author styles at all, or some chunks of the site’s usual styles but not others, or all of the usual styles with a few oddities thrown on top for good measure.  For a few hours, during which I had to attend to something else, the site was fine except that in IE/Win, the main content column was quite a bit wider than usual, and some bits of content were visually exceeding the edges of the design box.  All that was happening because I was turning styles on and off in an attempt to stop freezing Internet Explorer for Windows.

Freezing?  Oh, yes.  As in locking it up so that people had to use the Task Manager to force-quit the process.  There were probably a few reboots out there as well; there were at least a couple here in Casa de Meyer.  Ordinarily, I’d apologize.  Not this time.  If you want an apology, try finding the person or persons responsible for IE’s CSS handling, and demand an apology from them.  I’m not taking the rap for this.

To set the stage, let me back up a couple of days.  As I passed by Kat’s office, she called out, “Hey, how come my browser keeps getting screwed up?”

“Because it’s Explorer,” I said.  “Next question?”

“Ha ha.  Seriously, every time I try to view your ‘ten things to do in Cleveland‘ post, the computer crashes.  I think there’s something wrong with it.”

Grumbling, I wandered over to her computer.  Sure enough, the browser was completely frozen.  She’d already called up the Task Manager and was forcing the browser to quit.  She said it was the third time she’d had to do it.  As I watched, the screen went blank, then drew the desktop color and stopped.  The cursor appeared as an hourglass, and refused to change or even move.

Once the system had gone through a hard reboot, I fired up Netscape 7 and loaded up meyerweb.  I surfed around to various posts.  No problems at all.  I then launched IE and loaded up the home page.  No problem.  I went to the offending post.  Instant freeze.

After a few more invocations of the Fatal Freeze, I wandered out of her office again, muttering about Explorer and Windows and pondering the possibility that her computer had been infected with some kind of virus, malware, or other nastiness.  But then, the next day, I got some e-mail reporting similar problems.  Then Ian Firth managed to get a comment in about the problem on the post “Really Undoing html.css“, even though others were getting the Fatal Freeze on that very post.  And he mentioned that it was happening in both IE and FeedDemon—which meant it was something in IE’s rendering engine, since FeedDemon just wraps itself around the engine.  A similar report cropped up in the FeedDemon forums this morning, where it was mentioned that a similar problem had already been seen in the post “Standards Savings“.  (Not that anybody had actually bothered to tell me, but hey, whatever.)

So I fired up VirtualPC this morning and tested the problem for myself.  And sure enough, I was very quickly the latest resident of Lockup City.  So I started narrowing down the cause.  I’ll spare you all the nasty details (and foul language) of my bug hunt, and cut to the chase: the lockup was happening on entry pages where the post content included an element that used left padding.  Blockquotes and lists were the prime triggers.  There wasn’t an absolute 100% guarantee of trouble, but it was close.  I could avoid the freeze by commenting out a single declaration in my main style sheet:

#main {
  margin: 0 15em 0 0;
  /* padding: 3em 4em 3em 4em; */
  border-right: 1px solid #AAA;
  background: #FFF;
  min-height: 30em;
}

That’s why the content was running rampant earlier today.  I had to leave that line commented out for a few hours.  But I knew that couldn’t be the real cause, because it didn’t cause freezes on the home page, or even on monthly or daily archive pages.  The freeze only happened on an individual entry page where there was a padding-indented element inside the content column.  Thus, the source was most likely to lie in style sheet that’s applied only to post pages.

So I started digging through my entry style sheet until I narrowed the problem down to this line:

.prev-next {margin: 0; padding: 0.25em 1% 0; 
  float: left; width: 98%;}

If I commented it out, and uncommented the padding declaration from before, there were no problems.  So the culprit lay somewhere in the .prev-next rule.  Anyone want to guess at the cause?  Go ahead.

Oh, all right, I’ll tell you.  It was float: left;.  As soon as I removed that declaration, the IE6 freezing problem just melted away.  So if you’ve encountered freezes while trying to view entry pages in the past, you shouldn’t any more.  (If you do, please comment on this entry with the exact browser and OS you’re using.)

The original point of the float statement was to get the unordered list to wrap around the floated list items within it, since floated elements wrap around floated descendants (for more details, see my article “Containing Floats“).  Since that was apparently a recipe for disaster, I modified the rule to read:

.prev-next {margin: 0; padding: 0.25em 1% 0; 
  width: 98%; height: 1em;}

It isn’t exactly the same as what I was doing before, but the result is close enough for now.

What else might I have done?  Well, in all honesty, I thought seriously about leaving things status quo and letting IE users go hang.  I don’t cater to potential crash bugs in NN4, for example; why should I make an exception for another browser?  But as I always knew I would, I grumbled a bit and then made an accommodation for IE.  I may one day restore the float for more modern browsers and use some sort of hack to hide it from IE/Win, but for now I’ll leave things be.

What’s odd to me is that the styles involved in triggering this problem have been in place literally for months.  If this was a problem, it should have arisen before now.  Yet the first I heard of this freeze bug was two days ago, and then all of a sudden I was hearing about it from multiple sources.  If I’d been updating my CSS, that would be understandable, but I wasn’t.  So what happened?  Did the installed Explorer population just get spontaneously and collectively buggier over the weekend, or what?  Is there a subtle worm running around adding bugs to IE’s rendering engine?  I’m really at a loss here.

As to why that particular combination of styles would cause IE to freeze up, I’m completely at a loss.  Not a clue in the world.

While I was mucking around in the CSS anyway, I decided to see if I could fix the rendering error in IE/Win that made the sidebar hang out over the vertical separator.  I did, so far as I can tell.  The problem there was the “Exploration” box and the styles I’d applied to it.  Apparently, if you set a form element to width: 95%; margin-left 5%; and then set a text input within that form to width: 100%;, it all adds up to something like 120%, or something.  So I did a little bit of a hack to hide the input element’s width value from IE/Win.  The input box won’t be as wide for IE/Win users, but as far as I’m concerned that’s an acceptable loss.

I hope your morning was substantially less frustrating than mine.

• When Browsers Attack! was published on Thursday, September 16th, 2004.
• It was assigned to the Browsers and CSS categories.
• There have been fifty-four replies.

There’s an aspect of document presentation most of us don’t consider: the browser defaults.  If you take an HTML or XHTML document—for the purposes of this exercise, assume it contains no presentational markup—and load it up in a Web browser with no CSS applied, there will still be some presentational effects.  A level-one heading, for example, is usually boldfaced and a good deal larger than other text, thus leading to the old stereotype of headings being “big and ugly”; the pre element typically honors whitespace and uses a monospace font; a paragraph is separated from other elements by a “blank line”; and so on.  From a CSS point of view, all this happens because the browser has built-in styles.

Tantek recently wrote about his creation of a file called undohtml.css, whose sole purpose is to strip away some of the default browser styles applied to common elements.  By resetting all headings to the same size, for example, he avoids the inconsistencies of heading sizes across browsers and brings everything to a common baseline.  If a different size is desired, the author has to do it manually.  (He should probably zero out the margins on headings as well, as those too tend to be inconsistent across browsers.)  He also zeroes out their margins, using a separate rule that I overlooked when I first posted.  Apologies to Tantek for my initial claim that he didn’t take that step.

Of course, Tantek isn’t really removing all the default styles, but (so far) just those that have given him the most trouble.  When it comes to Gecko-based browsers like Firefox and Mozilla, however, you can completely eliminate all built-in styles.  These browsers use a series of style sheets to control the presentation of documents, forms, MathML markup, and so on.  In OS X, you can find most of these style sheets by showing the package contents of the browser’s application file and navigating to Contents > MacOS > res.  On just about any other OS, it’s even easier; just search your hard drive for html.css and open the directory that contains that file.

If you look in html.css, you’ll find all of the styles that make what we think of as “unstyled” documents act the way they do.  Consider, for example:

area, base, basefont, head, meta, script, style, title,
noembed, noscript, param {
   display: none;
}

That rule is why the head element and all its contents don’t appear in your browser (as well as all those other “invisible” elements).  From a CSS standpoint, there’s nothing special about those elements as compared to others like div or ul.  The fact that they’re traditionally “invisible” is irrelevant—but with that one rule, the tradition is preserved.  You can always override the rule, of course; try style {display: block;} on a test document that contains an embedded style sheet and load it up in Firefox/Mozilla.  It isn’t magic.  It’s just a change from the usual way that documents are presented.  (See this test document for an example.)

There’s also:

/* nested lists have no top/bottom margins */
ul ul,   ul ol,   ul dir,   ul menu,   ul dl,
ol ul,   ol ol,   ol dir,   ol menu,   ol dl,
dir ul,  dir ol,  dir dir,  dir menu,  dir dl,
menu ul, menu ol, menu dir, menu menu, menu dl,
dl ul,   dl ol,   dl dir,   dl menu,   dl dl {
  margin-top: 0;
  margin-bottom: 0;
}

So in order to remove the top and bottom margins from nested lists, which is a traditional behavior of HTML browsers, that rule needs to be in the default style sheet.  Remove it, and nested lists would have top and bottom margins thanks to another rule in the style sheet:

ul, menu, dir {
  display: block;
  list-style-type: disc;
  margin: 1em 0;
  -moz-padding-start: 40px;
  -moz-counter-reset: -html-counter 0;
}

That rule not only sets the usual margins and such, but also includes some Mozilla-proprietary properties that help lists act in accordance with our expectations.  There are certain aspects of traditional presentation that aren’t (yet) fully describable using CSS, so the Mozilla folks have had to add properties.  In accordance with CSS2.1, section 4.1.2, these proprietary extensions are marked with a vendor prefix; here, it’s -moz-.  So any property or value you see starting with that string is a proprietary extension.  (For the record, I have no objection to extensions so long as they’re clearly marked as such; it’s the “silent” extensions that bug me.)

There is more to the presentation story than just html.css.  In the same directory, you can find quirk.css, which is applied instead of html.css when the browser is in “quirks” mode.  Another style sheet, viewsource.css, affects the presentation of any view source window.  All the nifty color-coding happens as a result of that style sheet, which is applied to automatically-generated markup that underlies the actual source you see.

So how do you completely strip out the default styles for an (X)HTML document?  Quit the browser application and rename the file html.css to something like html222.css.  Do the same for quirk.css.  Now re-launch the browser and find out just how much you’ve been taking for granted.  Feel free to browse around the Web and see what happens on various sites, but you’ll have to type blind, because the address bar won’t show any text.  You can still drag HTML documents on your hard drive into the window and see what happens.  If a document has any CSS applied to it, then the browser will use it.  It just won’t have any of the default styles available, so you’ll be applying your styles on top of nothing, instead of the usual foundation of expected presentation.

So what exactly is the point of all this?  As it turns out, I believe there are four:

1. By studying html.css, beginning CSS users can compare the rules to the “unstyled” presentation of documents, and thus get a much better idea of how CSS works.
2. By removing the default styles, you can come to a much greater realization of how much presentation is taken for granted, and how much there is to be dealt with when creating a new design.
3. On a related note, note that the absolute bare minimum presentation of a document is to render all elements with inline boxes, and to show every scrap of content available.  Even something as basic as making a paragraph generate a block box is a style effect.
4. It helps us to realize that what we often think of as the “special handling” of HTML is anything but: in Firefox/Mozilla, HTML documents are just a case of some markup that happens to have some pre-defined CSS applied to it.  Granted, the proprietary extensions needed to keep things in line with expectations are a case of special handling, and those tell us one of two things:
   • CSS still has a long way to go before it can be called a full-fledged layout tool, since it can’t fully recreate traditional HTML layout.
   • Old-school HTML layout was so totally wack, it’s no surprise that it’s hard to describe even with a tool like CSS at your disposal.
   I’ll leave it to the reader to decide which of those two they prefer.  Or, heck, choose both.  It isn’t as though they’re mutually exclusive.

Have fun fiddling with or completely removing the built-in styles!  Just remember: modifications like those described are made at your own risk, I’m not responsible if you do this and your hard drive vaporizes, no warranty is expressed or implied, not a flying toy, blah blah blah.

• Really Undoing html.css was published on Wednesday, September 15th, 2004.
• It was assigned to the Browsers and CSS categories.
• There have been sixty-six replies.

There’s a faint tendency in my work to operate in threes.  I wrote a theory book, a reference book, and a practical book, for example, even referring them to the three legs of a stool.  (Okay, so I’ve written more since then.)  Hopefully, this will serve as the third of three posts on tables and layout, and not the third of more than three.  I have other things I want to write about that have been delayed, and honestly, I grow weary of tromping the same ground again and again.

Brad Bice pointed out that my example markup could be noticeably reduced in size by doing the following:

div#layout {display: table;}
div#layout > div {display: table-row;}
div#layout > div > div {display: table-cell;}

<div id="layout">
 <div>
  <div>...content...</div>
  <div>...content...</div>
  <div>...content...</div>
 </div>
 <div>
  <div>...content...</div>
  <div>...content...</div>
  <div>...content...</div>
 </div>
 <div>
  <div>...content...</div>
  <div>...content...</div>
  <div>...content...</div>
 </div>
</div>

That brings the CSS approach roughly into line with the weight of the table-based approach, which is good.  That still leaves us with the larger problem that Explorer still doesn’t support the application of table-related display values to non-table markup, so the layout will completely fall apart in IE/Win, which is bad.  I suppose you could script your way around the problem, a la IE7.  I wonder how you’d account for the lack of things like rowspan and colspan, though.  CSS doesn’t offer anything comparable.

There were a few responses to the effect of “what Eric fails to say is that table elements already have a predefined meaning”.  True, I failed to say that, mostly because I didn’t think it was important to bring up.  I think it’s fairly safe to assume that if you’re worrying about any of this stuff, then you’re going to try to use semantically appropriate elements when you can.  However, if you accept that there are times when a grid layout system is needed, then you have to accept that need will override any concerns about defined element meanings.  In other words, the defined semantics of table markup are important, but they aren’t important enough to block the use of table markup when it’s needed for layout purposes.

Some would say that if you can’t accomplish your design without violating markup semantics, then you should create a different design, one that doesn’t require the use of table markup.  That’s one of those “you can choose any color you want as long as it’s black” arguments that just make me sadly shake my head.  There’s no argument that will change that kind of thinking: it rejects reality in favor of internal consistency.  If that works for you, great, but I can’t operate that way.  We’ll just have to agree to disagree.

Then there were the responses that ran something like “okay, so tables are necessary for a few things, but for almost every type of Web design you don’t need to use tables”.  Yes.  I said that.  I said it several times, in fact, in different ways.  Maybe that was a mistake.  So, if I may, allow me to summarize the points I’ve apparently been obscuring over the past few days.

• In the vast majority of Web design cases, you can accomplish your layout without the use of table markup, and you can do so in today’s browsers.  This applies even to most layouts that appear to be grid-based at first glance.
• There are a few cases, very rare ones, that require grid-driven layout where all the grid pieces line up both horizontally and vertically, both side to side and top and bottom, and the contents of the pieces have dimensions that cannot be predicted in advance.
• At the current stage of the Web’s evolution, such layouts require table markup if you want the design to work as intended in Explorer as well as more recent browsers.
• The table markup used in such designs can and should be very light-weight, and use CSS for presenting all of the visible content within the table.  The table itself can also be styled using CSS for the most part, although row- and column-spanning still has to be done at the markup level.
• From this point on, anyone who uses these posts to claim that I’m saying tables should always be used for layout is either not paying any attention, has an agenda to promote, or both.  Probably both.

Fin.  I hope.

• To Be Tabled was published on Monday, September 6th, 2004.
• It was assigned to the CSS category.
• There has been one reply.

I mentioned in my post that the only CSS grid layout capability is styled tables.  Then I said that the only “pure CSS” grid layout approach being to apply table-related display values to non-table elements.  In one sense, I said the same thing twice, but in another sense, I contradicted myself.  When I read the post again, I decided that a little clarification was in order.

So let’s say that you have a deep burning desire to create a grid-based layout without using any table markup.  Suppose this layout is based on a 3×3 concept, where the pieces all need to have their horizontal and vertical edge line up with each other.  To do that, you’d need styles and markup like the following:

<div id="layout">
 <div class="hgroup">
  <div class="cell">...content...</div>
  <div class="cell">...content...</div>
  <div class="cell">...content...</div>
 </div>
 <div class="hgroup">
  <div class="cell">...content...</div>
  <div class="cell">...content...</div>
  <div class="cell">...content...</div>
 </div>
 <div class="hgroup">
  <div class="cell">...content...</div>
  <div class="cell">...content...</div>
  <div class="cell">...content...</div>
 </div>
</div>

Then, to that markup, you’d apply the following styles:

div#layout {display: table;}
div.hgroup {display: table-row;}
div.cell {display: table-cell;}

So there you go: a grid layout that uses absolutely no table markup by applying table display roles to other elements.  And the point is…?

Frankly, I don’t think there is one.  Because let’s be honest, given a choice between the markup in that previous example and this next one, I think the next one is not only easier to read, but it’s lighter in markup weight.

<table id="layout">
 <tr>
  <td>...content...</td>
  <td>...content...</td>
  <td>...content...</td>
 </tr>
 <tr>
  <td>...content...</td>
  <td>...content...</td>
  <td>...content...</td>
 </tr>
 <tr>
  <td>...content...</td>
  <td>...content...</td>
  <td>...content...</td>
 </tr>
</table>

Not to mention the table will work in IE/Win, whereas the “pure CSS” version I detailed won’t.  That kind of puts a damper on any enthusiasm I might have summoned for it.

In CSS terms, the reason a table works the way it does is that the browser itself applies the following rules from somewhere deep within its codebase:

table {display: table;}
tr {display: table-row;}
td {display: table-cell;}

I know, tables have existed for longer than CSS, but my point isn’t that CSS makes tables possible.  What I’m saying is that that’s the CSS way of describing a table and how it functions.  If you want elements that effectively bind together and affect each other’s height and width, then table-related display values are the only game in CSS Town.

Is that enough?  It doesn’t feel like it to me, but on the other hand, any grid-layout system would have to do basically the same things.  For example, suppose we invented a set of properties and values to describe a grid layout.  They might look something like this:

div#layout {display: grid-layout;}
div.hgroup {display: grid-layout-group;}
div.cell {display: grid-layout-box;}

…for which we could simply substitute the table values mentioned earlier, and get the same result.  Why reinvent that particular wheel, especially when the new wheel would take even more years to be adopted?

There are only bigger problems lurking in related proposals.  A common request is a way to set the height of one element to equal another element.  Here’s the problem:

div#one {height: element(div[id="two"]);} /* totally bogus CSS-like example */
div#two {height: element(div[id="one"]);} /* DO NOT TRY THIS; IT WON'T WORK */

An infinite loop!  Yay!  Now what?  Furthermore, assuming you have a way to break the loop, which of the two elements in question will be the one that’s actually used to set the height for both?  There’s nothing in that set of rules that says that the taller of the two should win out, so you might end up with the two element set to the height of the shorter of the two.  What are the odds that’s what was desired?  (Non-zero, but pretty darned small.)  Then again, it might be the taller of the two.  Or maybe they’ll set to the average of the two elements’ content heights, so you get one too tall for its content and one that’s too short.

And this is a simple case, one that could probably be fairly easily resolved.  The complicated cases are where real trouble sets in, because you can get runaway situations where two (or three or more) elements keep triggering growth in each other, heading for infinity as fast as your rendering engine can calculate it.  If you allow value expressions—another common request—then it gets even worse.  For example:

div#one {height: element(div[id="two"]);}    /* see previous warning */
div#two {height: expression(element(div[id="one"])+25px);}

Ruh-roh, Raggy.

You might say, “Well, if any author is dumb enough to do that, then they get what they deserve.”  Only the author doesn’t get it, the reader does.  If you come across such a page, your (height-linking and expression capable) browser will freak out, maybe even crash.  Hopefully the developers made sure to add infinite-loop checks to prevent such nastiness, but are you sure they’ll manage to catch every possible case?  Without standing in the way of legitimate iterative processes?

And so we come back full circle to the present, where the only real choice for grid-dependent layouts are tables.  They should always be simple tables, employing a bare minimum of markup and styling the cell contents with CSS.  You can do that easily enough by ID’ing the cells, and writing your CSS accordingly.

And remember: this is only necessary for grid-dependent layouts.  Most layouts don’t fit that description, as I said in the previous post.  The only one that comes to mind at this moment is CNN.com, which has all those various boxes that need to line up just so (in the current design, anyway) even though there’s no guarantee of how tall or short they’ll be from one hour to the next.  They use tables to get those boxes to line up, as well they should—really, as well they have to, because there’s nothing else they could do outside of creating an all-Flash site.  But for the vast majority of sites, as Doug said, there’s no reason to use tables for layout.

• CSS Gridlock was published on Sunday, September 5th, 2004.
• It was assigned to the CSS category.
• There have been seven replies.

A while back, in the summary to his article “Throwing Tables Out The Window“, Doug asserted:

There’s no longer any reason to use tables for layout, nor is there reason to maintain multiple versions of a site solely for different desktop browsers. Throw the tables out first. Trust us, they’re not needed anymore.

At the time, I remember thinking that I agreed with him for about 90% of design cases, but that there was that nagging 10% that still seemed to require tables.  That would be the cases where elements have to have the same visual height, regardless of their content height, and the layout is not fixed-width.  (Fixed-width cases can be easily handled using Dan Cederholm‘s Faux Columns.)  The classic example is a liquid two-column layout containing a sidebar and main-content column, where the sidebar has a different background than the main content, and that background has to be as tall as the main content—and, conversely, the main content’s background has to be as tall as the sidebar’s if the sidebar is taller.  There are ways to get this to happen using non-table markup, but it usually involves at least as much markup as using a simple table, and is less stable in older (NN4-era) browsers.  If  you go to three columns, all of which must match each other’s heights, then things get really wacky.

So I eventually got around to asking Doug about those cases, and it turned out he’d been mulling an idea similar to one I’d had but never pursued.  We tossed messages back and forth, hammering away at his idea, and eventually christened it ‘Sliding Faux Columns’.  Doug writes about this technique his recent post, Liquid Bleach.  Here’s the basic idea in a nutshell, quoted from Doug’s post:

The trick is to create an ultra-wide background image (or two images for 3-column layouts, thus the Sliding-Doors-nature of the technique). The image is partially opaque, and partially transparent. It gets tiled vertically inside the parent container, just like Dan’s Faux Columns technique. The opaque portion of the image should match percentages of the column it helps create, so that it can be positioned with an identical background-position value. This allows the transition from opaque to transparent to become the axis point for the background’s position.

Amazingly, the technique appears to work in IE5/Win and later.  IE5/Mac has some problems, and while the problems were vaguely familiar ones we never did manage to figure out how to work around them.  More recent browsers, like Safari and the Gecko family, seem to handle the technique just fine.

While we were working on the concept, I threw together some test cases.  They aren’t up to the usual css/edge standards, which is why you won’t find a link on the main css/edge page.  I’m putting them out in public because they might be interesting to anyone who wants to play with a boiled-down version of the technique.  Note that the super-wide images are only needed if you’re trying to fill a color or pattern into the background of the column(s).  If you just need a vertical separator, then an image as wide as the separator (say, one pixel) is all you need.  The CSS works out to be exactly the same in either case.  It’s just a difference of a 3000-pixel-wide background image versus a one- or two-pixel-wide image.

The markup isn’t exactly pretty: it requires a couple of wrapper divs just to set up the column backgrounds/separators.  This isn’t more markup-heavy than a table constructed to serve the same layout goals, but then it isn’t a whole lot less heavy either.  Personally, I remain agnostic on which is a better approach.  Bending a table to layout purposes isn’t clean, but to my eye, neither is constructing a couple of 3000-pixel background images just to get the effect a simple three-cell table can allow.  You’re hacking your way around limitations in CSS either way you go.

This brings me to a question I often encounter: “Why doesn’t CSS have a grid layout capability?”  It does: styled tables.  That’s pretty much it, but it’s there.  Until CSS gets grid-layout functionality that isn’t table-centric—the only “pure CSS” grid layout approach being to apply table-related display values to non-table elements, and boy, does that ever make a lot of sense—and that functionality is widely supported, then tables are the best grid-based layout system available in the (X)HTML+CSS space.

Before the purists warm up their flamethrowers and the CSS haters start to crow that I’ve done a Bush-style flip-flop, note that I said it’s the only grid layout system available.  The designs that absolutely require such a system are that 10% I was talking about earlier.  Most other designs don’t need a grid system, and so don’t need tables for layout.  The current Wired News design is one, the new Chevrolet site is another, and meyerweb is still a third.

As Doug has proven with Sliding Faux Columns, it’s possible to cover a good portion of those sites that would normally need a grid system without table markup.  That’s certainly interesting, and in one sense it’s quite useful in that it details the hoops through which one has to jump to make this sort of thing happen with CSS.  When you get right down to it, though, I’m feeling very ambivalent about which I’d prefer to use: Sliding Faux Columns or a simple table to set up the columns.  I suspect probably the latter, in my personal case.  The great thing is that now we have a choice for those kinds of designs.

For the small percentage of designs that really do require a full grid system, though—and I really have seen only a few in all my years of surfing the Web—tables are your only realistic choice.  I wish CSS had addressed that point in years past, so that we’d have some hope of support at present.  It’s always struck me as one of the biggest missed opportunities of CSS.

• Sliding Faux Columns was published on Friday, September 3rd, 2004.
• It was assigned to the CSS category.
• There have been twelve replies.

I bet you didn’t know that Molly and I have super-powers, did you?

The benefits of using CSS on a regular basis are amazing, really.  I’m hoping to develop telekinesis next.

• Up, Up and Away was published on Friday, August 27th, 2004.
• It was assigned to the CSS and Humor categories.
• There have been seven replies.

Okay, apparently that wasn’t the rest of the story.  In part, that seems to be because I didn’t express what I was trying to say very clearly.  In others, it’s because people reminded me of points I should have made, or else brought up good points I didn’t address (or consider).  Time for some follow-up.

A few people said “who cares about three/six bytes?”  Me, obviously.  On many pages, such as the archived entry, it’s not going to be a big deal.  On the home page, it will be a slightly bigger deal.  On a monthly archive page, it’s common to see twenty or more dates on a single page.  There we start to measure weight reductions in tenths of a kilobyte.  If I take a similar approach in five other cases, that’s half a kilobyte.  It adds up over time, especially when you get several hundred thousand page views a month.  The difference is even more fractional when using gzip encoding, as I am.  But a gzipped 10.4KB page is still smaller than a gzipped 10.5KB page.  It will always be smaller.  Why not take the improvement, if nothing else is harmed?  (As I believe to be the case here, although obviously not everyone agrees.)

The most common objection to what I wrote is that using b violates “semantic purity”.  I disagree entirely.  span has no more semantic purity than b, in my view.  Both are intended for purely presentational effects.  Neither adds anything to the document’s semantics in a fashion that, for example, strong does.  So on those grounds, the choice is a wash; neither is any better than the other.  The only real difference between the two elements (besides their names) is that b has, mostly by tradition but also by way of description, a default presentational rendering—the text uses a bold font face.

Which leads to the next point, one I forgot to make in the previous post (that’s what I get for writing entries late at night).  As I just said, if you use b, then in a view of the document free of author CSS, the text will be boldfaced.  That’s exactly what I want in this case; in a browser where an h5 isn’t boldfaced by default, and there is no CSS being applied at all, I’d like the date to be boldfaced.  Why?  I just do.  Oh, sure, I could come up with a rationale like it being important to highlight the entry date in a weblog, but the reasons aren’t really relevant.  As the page author, those are the kinds of decisions I get to make.  So given that desire, b has another advantage over span for the case I’m describing.  In cases where you don’t want the text to be boldfaced in a rendering free of author CSS, then b is actually disadvantageous.  There will be inevitable complaints about presentational markup, but in a non-CSS environment, what other presentational influence can I have?  None.

It was also pointed out by a few people that I’m over-classing my markup, since I could easily use descendant selectors to get the same results.  That’s absolutely true.  The classes (title and meta) are more remnants of earlier designs, and have outlived their usefulness.  In the beginning, I used the classes because I thought I’d want to use sub-headings in journal entries, in order to break up long posts.  (Andrei does this quite a bit, as do some others.)  I wanted to be sure that the title and date styles applied only to those particular headings in an entry, and no others.  Since then, practice has shown that I never write entries with sub-headings, so the classes aren’t necessary, and in fact my CSS didn’t even need the classes to be there.  Thus, I’ve taken out the classes.  If I ever find myself wanting to break up an entry into headed sections, I’ll use h6 to do it.  So thanks to those who held my feet to the fire on that point.

Lachlan Hunt pointed out that I could save a lot more weight by using UTF-8 characters instead of encoded character entities.  True.  And if I could get UTF-8 to work, I’d probably try do that, assuming I could be sure the content wouldn’t be mangled in current browsers, a worry I definitely don’t have when it comes to element handling.  Lachlan also mentioned that in a CSS3 world, I could use the ::outside pseudo-element to generate another box for styling, instead of nesting one element inside another.  Yes, and in an XBL world I could just generate the extra box(es).  Until either one or both of those worlds comes to pass, markup is the answer.  In this case, I prefer b to span for all the reasons mentioned earlier.

As you might suspect, anyone who doesn’t accept my earlier assertions about markup semantics isn’t going to agree with my markup choices.  I’ve no problem with that; note that I never said anything even remotely resembling “b is always better than span“.  It isn’t.  Neither is span always better than b, as I’ve discussed here and in the previous post.  By all means, if you have a deep-seated aversion to presentational elements, then don’t use them.  In my world, one avoids using them when a semantic element would better serve the intent.  When there is no semantic need, then I figure you should use whatever works best for you.  Knowing how to tell the difference between these cases is a big step toward really understanding how to use markup efficiently and well.

• More Markup was published on Tuesday, August 24th, 2004.
• It was assigned to the CSS category.
• There have been twenty-six replies.

In a previous post on heading levels, I used some of meyerweb’s markup as an example.  In that markup, an apparently useless <b> element appeared.  Here’s the markup:

<h4 class="title"><a href="…” title="…">entry title</a></h4>
<h5 class="meta"><b>entry date</b></h5>

In that post, I also said:

And yes, there are b elements in my markup, and I’m doing that on purpose.  I’ll talk about it some other time.

So now it’s time.

The boldface element is actually a holdover from the previous designs of meyerweb.  You can still mess with them on the theme example page, if you like.  The original idea was to provide an inline element as a hook on which I could hang some styles.  For example, if I wanted to put the date in a box that exactly surrounded the date’s text, but no more than that, I’d need an inline box.  Therefore, I could either style the <h5> element to generate an inline box, or I could have an inline element there for styling purposes.

In the first case (inlining the h5), I’d lose the block box that the element generates by default, thanks to the browser’s built-in HTML styling.  That might be okay in some cases, but more often than not it would be a problem.  Inline boxes accept a limited set of properties, and putting an inline box between two block boxes is generally a recipe for funkiness.  So that left me with the second case, that of adding an inline element.  As an added bonus, doing so gave me two elements (h5 and b) to style, if I wanted them both.

Here’s the CSS that applies to the date headings and their boldface elements:

#thoughts h5 {font-size: 1em; line-height: 1em;
  margin: 0 0 0.5em; padding: 0; color: #CCC;}
#thoughts h5 b {font-weight: normal; font-size: 0.9em;}

Although I’m not doing much with the b element, style-wise, what I’m doing is useful.  First, there’s making sure the font weight is normal, and not bold.  All right, that’s not really useful.  Second, the boldface element is used to reduce the size of the date’s font by a small amount.  I use the b element to reduce the size of the font because that leaves the element box of the h5 alone.  In other words, its text box is not reduced, which means it’s consistent with the text around it.  If I ever go back to a design where the date and title are “on the same line” and lined up with each other, as was the case in many of the old designs, I won’t have to do weird fractional math just to make it happen.

Of course, in the current design, that isn’t an issue.  So in a sense, the b element is sort of a vestige from an earlier stage in the site’s evolution, like a markup appendix.  The only difference here is that the b element might become useful again, whereas I don’t think the appendix has much chance of a comeback.

The other expected question is why, if all I wanted was an inline element as a styling hook, I used a b instead of a span.  Simple: the element name is three letters shorter, so for every hook, I’m saving six characters.  If there are, say, twenty such hooks on a page, that saves me 120 characters.  It’s a small consideration, but by such incremental savings are document weights reduced.  “What about semantic purity?” you may ask.  In my view, b and span have the same semantic value, which is to say basically none.  They’re both purely presentational elements, with the difference that span doesn’t have any expected presentational effects in HTML.  So I used the presentational hook that made the most sense to me: b.

If my goal was to emphasize the date, then I’d have used em or strong, but it wasn’t.  I just needed a hook, at least once upon a time, and that was the element I chose as my hook.

And now you have the rest of the story.

• Markup Missive was published on Monday, August 23rd, 2004.
• It was assigned to the CSS category.
• There have been forty replies.