Springcleaning Stylesheets

I’ve been updating the stylesheets ‘round here. If things look a little screwy, please do adjust your set: refresh until things settle down.

The main change was finally implementing image replacement on the logo (contained in a <h1> tag). Up ‘till now, I’ve actually been using an <img /> tag to point to the logo. I had to use a little bit of PHP to make it point to the correct image for the current "theme". Using the image replacement technique allows better separation of content from display, offloading the selection of the correct image to the stylesheet.

The other change is a bit more unusual.

Adactio is written in XHTML 1.1. The site also sends the content-type "application/xhtml+xml" to conforming user agents, i.e. Mozilla-based browsers (everyone else gets straightforward "text/html").

This is actually really handy for me in that it turns any Mozilla based browser, like Firefox or Camino, into a bug tracker for validation errors. Because the document is being treated as XML, the parser chokes on the first error it comes across (like, say, a stray unencoded ampersand) allowing me to quickly and easily find and fix errors.

Also, it means that my site gets listed in the X-Philes.

An unfortunate side effect of the XML content-type was showing up on the front page of adactio. It appeared that the <body> wasn’t extending to the full height of the browser window as would be expected in a regular (X)HTML document. This meant that any tiling background image (or even background colour) was stopping as soon as the content was done. This left a mass of white space between the end of the content and the bottom of the browser window.

Technically, this behaviour can be seen as being correct. I’ve applied styling to the <body> tag and the <body> finishes before the bottom of the window.

It turns out the the <html> tag also needs to be styled, either by applying the same background image/colour or by explicitly setting the height to 100%.

I went with the second option, thowing the extra <style> declaration into the <head> if the browser was being sent the "application/xhtml+xml" content-type. Unfortunately, this means there’s often an unnecessary vertical scrollbar but it looks a heck of a lot better than it used to.

Mozilla-based browsed may well experience some odd background behaviour in some other pages, e.g. the contact page with the tatemodern theme selected. This is related to absolutely-positioned elements: technically, they’re not part of the document flow so the <body> doesn’t count them as part of its height.

So, while things are still far from perfect, I think they’re an improvement on the way they were.

Have you published a response to this? :

Previously on this day

18 years ago I wrote Cheese Racing

You know it’s only a matter of time until this is an Olympic sport.

18 years ago I wrote Episode II Teaser Trailer: Clone War

Excuse while I indulge in a moment of geekness.