One thing I forgot to mention in my previous entry regarding the latest design is that I'm not specifying any styles for most elements, instead letting your browser render them using its default styles. I'm not, for example, declaring any style rules for ordered or unordered lists, blockquotes, citations, or most paragraphs [1]. A font type and relative font size are specified on body and inherited by most everything else, but you'll otherwise get whatever your browser thinks is best. Is this crazy? (All the browsers I've tested in render things reasonably.)
[1] A bottom margin on #comments dd p is the exception.
So I've had the shell of this new design on my HDD for several months and I'm still not sure I've worked out all the kinks. I've decided to catch the remaining bugs -- I'm sure there are many -- and render the finishing touches in public. It seems to be working just fine, but it's possible that something is terribly disfigured in your browser of choice. As always, I appreciate any comments.
Two things worth noting:
The sliding header effect. Resize your browser to see the effect.
As the window gets smaller, the grey portion of the background will slide over the green.
It's pretty simple, really. What you're seeing is the result of two distinct background images.
A grey version of the header, which I've applied to the body
element, and a green version, which I've set as the background
image of this site's h1. The body element's right padding reveals
the grey image, which appears to overtake the green background as the browser window
shrinks.
Most of you, I'm sure, aren't making extensive use of the body element;
some of you won't want to specify right padding (because it affects other content).
An alternative method is to set the grey background on a wrapper div and
specify a right margin on the element/class/id to which you apply the green background.
I've made a quick example of how this might work, with inline styles to make it easier to view source.
I've strived for ultimate markup simplicity. The structure of this document is as follows:
<body>
<h1 title="dionidium.com">dionidium.com</h1>
<h2>Wayne Burkett's Weblog</h2>
<dl id="entries">
<dt></dt>
<dd></dd>
</dl>
<!-- On entries with comments -- >
<dl id="comments">
<dt></dt>
<dd></dd>
</dl>
<div id="menu"></div>
</body>
It's as basic as I can think to make it. h1 for the title of the document.
h2 to start the content. Entries and comments as definition lists.
This structure is only possible because Internet Explorer treats body like any
other div in Standards Mode. Now I'm living on the edge in both of the top
two browsers. Since my documents are still served as application/xhtml+xml to
browsers that support it, like Mozilla, it will, like before, fail miserably if I screw up and
create an entry that isn't well-formed. Internet Explorer won't complain as much, but
non-well-formed content will drop IE into Quirks
Mode, wherein it will helpfully begin treating body as the root element,
stretching it to fill the viewport. It's an ugly sight.
IE is getting its share of hacks. I designed toward Mozilla/Firefox and applied the underscore hack to anything IE rendered in an unexpected way. IE5.x browsers get their own 16-line (including comments) stylesheet, a last-minute effort to make the content accessible to that set of browsers. I don't want to know what this site looks like in browsers older than IE5.x.
As I play with this design, I'm starting to see that I may have to wrap the definition
lists in an extraneous div or resort to less pure markup. I'm getting
unpredictable margins in Mozilla, which occasionally -- not on all entries, but some -- adds
a one pixel margin to the bottom of all dt and dd elements,
despite other explicit style declarations. I don't know how to fix this.
On a side note, all documents are now authored in XHTML 1.0. No more XHTML 1.1.
I'm currently uploading a new design, so things are likely to look weird in places today. I expect to have most of it tweaked by this afternoon, so please refresh next time you visit.
Comments and criticism are most encouraged.
Reffy is a Windows referrer spammer by the fine folks -- bored teenager? -- at AdminShop. Reffy comes pre-loaded with the addresses of over 3000 blogs, one of which, considering recent spam I've received pointing to the AdminShop site, is doubtless mine. They're also responsible for a dubious SEO tool (gauge the "competitivity" of specific search terms) and a mass URL dumper (spread your influence to the "farest reaches of the internet").
On a lighter note, there's Daily Content, a dynamic content generator that lends "professionality to your site." It comes with a collection of "Yo Yama" jokes to get you started. Professionality.
This is really just an excuse to complain about referrer spam and point anyone interested toward my public referrer blacklist, which just got a few domains longer thanks to this unfortunate tool. I recognize that I'm probably shooting myself in the foot by linking to the misguided fools responsible for my spam problem, but pretending they don't exist isn't much of a strategy, either.