Styling Included Content
Web Review
January 1999
Some time back, I wrote an article about ways to integrate styles with server-side includes. Judging by the number of e-mail messages I've received, it was my most popular article to date. However, judging by the content of some of those messages, it was also misleading and confusing. This was due primarily to an oversight on my part-- I forgot to explain how you should cope with the addition of actual hyperlinks in your navigational toolbar. You know-- making the toolbar useful, or something like that.
In addition, I committed one of the great sins of how-to writing: I didn't explain how your results might vary. Unfortunately, the styles I picked aren't quite as cross-browser safe as they probably should have been. Let's look at how these created confusion-- the answer is actually instructive in ways to handle CSS correctly.
A Fast Flashback
Here's what I set forth in my last article: first, the styles for the toolbar, and the markup which is found in the include file.
TABLE.nav TD {border-style: outset 2px gray; background-color: #000066;
color: white; font: bold 10pt Verdana,sans-serif; padding: 0 0.25em;}
TD#picts {background-color: #6666CC; text-transform: uppercase;}
TD#search {background-color: #006600;}
TD#help {background-color: #CC6666;}
<TABLE class="nav">
<TR>
<TD ID="home">Home</TD>
<TD ID="games">Games</TD>
<TD ID="picts">Pictures</TD>
<TD ID="moovs">Movies</TD>
<TD ID="snds">Sounds</TD>
<TD ID="search">Search</TD>
<TD ID="help">Help</TD>
</TR>
</TABLE>
These work well enough, of course, as we saw in my last column:
| Home | Games | Pictures | Movies | Sounds | Search | Help |
However, once you start adding actual anchors (hyperlinks) to the text in those table cells, things start to go awry.
Where's the Override?
The reason this happens is that browsers tend to have styles already defined for anchors. For example, most browsers ship with their preferences set to make links both blue and underlined. These are pre-defined styles, and unless you make explicit declarations to the contrary, they'll carry into your design... whether you want them or not. This happens thanks to the cascade, which basically says, "Use the styles defined by the browser, but override those with styles the author (or reader) sets."
Ordinarily, you might think that the styles you set for your table cells would carry into the anchors-- after all, that's how inheritance is supposed to work, right? Well, no, not quite. In CSS1, styles which have been set, whether you did it or the browser did, always override inherited values, and so the browser's settings for the anchors override the inherited values.
Therefore, in order to make your anchors look the way we had the text in the original article, you would modify your style declarations something like this:
/* These styles go into the external stylesheet 'navbar.css' */
TABLE.nav TD {border-style: outset 2px gray; background-color: #000066;
color: white; font: bold 10pt Verdana,sans-serif; padding: 0 0.25em;}
TABLE.nav TD A {color: white; font: bold 10pt Verdana,sans-serif;}
TD#search {background-color: #006600;}
TD#help {background-color: #CC6666;}
/* This style goes into the file 'picts.html' */
TD#picts {background-color: #6666CC; text-transform: uppercase;}
/* This markup goes into the include file 'navbar.html' */
<TABLE class="nav">
<TR>
<TD ID="home"><A HREF="index.html">Home</A></TD>
<TD ID="games"><A HREF="games.html">Games</A></TD>
<TD ID="picts"><A HREF="picts.html">Pictures</A></TD>
<TD ID="moovs"><A HREF="moovs.html">Movies</A></TD>
<TD ID="snds"><A HREF="snds.html">Sounds</A></TD>
<TD ID="search"><A HREF="search.html">Search</A></TD>
<TD ID="help"><A HREF="help.html">Help</A></TD>
</TR>
</TABLE>
Once everything comes together (via LINKing, SSI-including, and so forth), the link for "Pictures" will be uppercase, with a lighter background, when viewing the file 'picts.html'. In addition, all link text within the navbar will be white in color.
The declaration color: white; is duplicated in both the TABLE.nav TD and TABLE.nav TD A declarations, just in case you decide to add text content outside the anchors. The font declaration is added to the anchor styles just for safety's sake. Unlikely though it may seem, the browser might have a font style set internally, and the only way to override it is to make your own declaration.
And the Other Problem...
The other roadblock to understanding seems to have been the styles I selected. Although they're solid CSS1, they use a lot of properties which Navigator 4.x doesn't understand. If you're an Internet Explorer user, you probably saw something close to what I did, since I tend to use IE (and I used it when writing the article). Navigator users, on the other hand, missed most of what I was writing about. Here's a comparison of how Explorer and Navigator for the Mac render the above styles:
Quite a difference, eh? I should have thought about this when I wrote the original article, and provided a screenshot of an "ideal" rendering. My apologies to those who were let down by my failure to do so.
And So...
This latter problem brings up a real issue for future articles. In the past, I've tried my utmost to stick to style issues which are immediately relevant-- that is, I've avoided writing about things which won't work in more than one major browser. However, this last time, I let loose, and in the process created a piece which people liked. It's just that the techniques described aren't usable in Navigator, which is obviously a problem for many readers.
So, to all of you who wrote in, and to everyone who reads these articles, I'd like to ask you to vote: would you prefer to see articles which stick to the reduced set of what's cross-browser safe, or should I delve into more advanced, specification-pure techniques and simply point out where browsers will fail? Please e-mail me at eam3@po.cwru.edu to let me know what you think-- all you really need to say is "Play it safe" or "Live dangerously," depending on your preference.
Thanks in advance for your input, everyone, and I'll see you back here next month!