David Anderson's Unfinished Symphony

Well, CSS naked day has been and gone again this year - well, at least for me it has. The last couple of years it's been on April 5th, and I've participated each year. This year was no exception - however I may have celebrated by myself as it seems they changed the day and forgot to tell me

I have a little PHP set up to automagically strip my CSS links out of my pages whenever it's April 5th anywhere in the World, and that worked perfectly again this year. The problem is, CSS Naked Day is now on the 9th, so I'm going to have to do it all again. So, here goes …

It's CSS Naked Day - Go here for more information about why I have no styles on this site, and maybe consider joining in

For those of you wondering why some sites are doing it on the 8th - the script used checks to see whether it's the 9th 'somewhere' in the world, and if so it then turns off the CSS. It's automagic!

I use the Suckerfish Dropdowns menu quite often when building large sites and rarely have too many problems with it. However, on one of the sites I'm currently working on there have been quite a few odd bugs - though I should stress that I don't think it's specifically an issue with Suckerfish, rather with nested dropdown menus (that use absolute positioned elements within floated ones) in general.

The most common issue found with this kind of menu is that, in Internet Explorer, relative positioned elements located below the menu on a page will overlap the dropdowns, obscuring them and preventing access to the links as a result. The normal solution for this, and the one most commonly suggested, would be to use a higher z-index on the dropdown ULs. On this occasion, though, increasing the z-index of nested lists within the dropdown menu didn't have any effect - not even when setting ridiculously high z-indexes, nor when also specifically setting a lower one on the positioned element. In the end I was compelled to remove positioning from all elements where I could without it affecting anything else.

That appeared to do the trick, until it was noticed that the issue was still present on some pages of the site despite relative positioning not being involved. After further investigation I discovered that the bug was limited to data tables containing links. Though, as mentioned above, there was no positioning involved. Despite that I kept my efforts to fix the issue focused on positioning and decided to test how various positioning properties affected things. I began, and ended, with static positioning (the default) by targeting all links within tables with the following CSS:

1. table a { position : static; }

Adding that to the bottom of my IE only style sheets fixed the issue. Thankfully! Unfortunately, things are never quite that simple where IE is concerned and I found that my fix broke an image rollover system used on 2 pages, preventing the images from displaying when the links where moused-over. To try to fix this I set all links in those 2 tables to use absolute positioning which, initially, seemed to work in this case. However, more thorough testing showed that while it fixed it for links above the page fold; all those below the fold would either vanish on mouseover or reposition themselves at the top of the table. Testing with all variations of positioning and link state proved fruitless. In the end the only answer was to fix the menu issue, and consequently the disappearing link issue, leaving IE 6 users without the thumbnail view. Sometimes sacrifices have to be made to ensure a website remains usable for its visitors, no matter how much the site owner wants a given feature to be added.

Regular visitors to the site should notice quite a radical change of design here which I'm hoping will make it a bit more visually pleasing. When I first started the site it was, almost literally, just thrown together in a hurry and without a finalised design. This was basically because there were a number of people that wanted the blog up and running and, I think, for me to start posting on it. Some of you may still remember the original look of the site, which was far from complete and so a little bit broken to say the least. After a little feedback I decided not to continue working with that design and came up with a working temporary one instead. Even though it provided everything I wanted from it (functionality, flexibility and simplicity) it was a little uninspiring and I was never really happy with it, despite that it managed to survive for a couple of years.

Simplifying the Interface

What I've tried to do with the new design is keep the important concepts intact - it's still, I believe, functional; it's still flexible, though now within a set limit; and, importantly, it's still simple. In fact I've made an effort to simplify it further. I found certain aspects of the old design were slightly cluttered, notably the links sidebar. In order to de-clutter the link heavy sidebar I separated the archives and external links section into their own pages, with them linked via a new primary menu. I've also used a little PHP and hidden the MyBlogLog widget from everyone but myself.

All in all I think the sidebar is cleaner and more useful while still sharing things that I want to share. Also, perhaps the most noticeable change is the dropping of the third column from the front page. My original idea for that was to allow the front page of the site to show the latest post in full whilst also showing the next 5 or 6 most recent posts, but rather than overloading the page with too much content these recent posts would just have excerpts showing on the front. The old design did achieve that fairly well, however the extra column meant that the front page would always seem a little cramped. It's also not necessary to have a third column in order to provide direct access to that content from the front page, so it got dropped.

New Sections

I've added a few extra sections to the site where I can provide supplementary information, such as an accessibility statement and privacy policy, including an about page. At the moment the about page is a bit bare; I do intend to put something in there at some point, hence its inclusion, however I haven't decided on what exactly I want to say. I've also extended the subscription page to include information about my feeds, feed readers and feed aggregators along with the original email subscription option that I've carried over from the previous version. There's also a contact form, just in case.

Ironing out the Issues

As with any project, there have been issues to resolve (I'm talking specifically about coding issues at this point).

PHP Issues

One of the things I wanted was for the archives page to show each category with all the posts for that category, to be able to reorder the categories, to be able to show the date of each post adjacent to the link to the post and to be able to structure markup how I wanted. One of the great things about Wordpress is its ease of templating, and to that end the codex provides details of the variety of template tags available for this, however those available for templating category listings didn't quite meet all of my requirements. This is where Sarah came in with a bit of help, well a lot of help, providing me with the PHP needed to pull the required information from the database in the way that I wanted. She also helped me write the PHP for my contact form, in the process helping me to add in fields checking for spammers, and also code to check that those fields had been completed appropriately.

The site used to use an old version of the Subscribe2 plugin which I held off from upgrading to the amount of work it would have taken to get a newer version to work with the existing theme. A new theme has meant that was no longer a consideration, and so I upgraded to the latest version of Subscribe2. It was only when I uploaded, and set live, the completed theme and upgraded plugins at the weekend that a few issues came to light. Basically the plugin only partially worked on the live site, with new subscribers receiving an email containing a link to confirm the subscription, but the link going to a blank page and the subscription not being confirmed. After a lot of reading through the plugin code, and with Sarah doing a number of tests, we found that there were three functions responsible for the confirmation process - commenting out the call to one of these functions allowed the confirmation to go through and the appropriate confirmation page to display - just in a very broken state as a number of scripted components failed to work on the page. It had, by that time, occurred to us that it was an issue with using customised permalinks on the site along with the way the plugin takes over an existing page that it rewrites with the confirmation - instead of doing this successfully the page was being redirected to the real permalinked page, causing the confirmation to fail. Once we had tested that this was the case, by resetting permalinks to the default method, it didn't take much to discover the real cause - a conflict between Subscribe2 and the Permalink Redirect plugin. This issue hadn't existed with the previous version of Subscribe2 that I'd been using, so something that has changed caused the conflict - the process of taking over an existing page from the database, rather than using its own dedicated one like the old version did. It's probable that the new method makes it easier for the plugin to be integrated with a theme and so it's an acceptable change in the grand scheme of things, but unfortunate that it results in a conflict. To fix it I dropped the other plugin.

CSS Issues

While differences in browser rendering continue to exist there are always going to be display issues when switching between those browsers. The star browser was Firefox, getting things right first time and according to standards. Internet Explorer 7 had a few minor issues, and IE 6 a few more, however these were relatively simple to fix with a few changes in margin, width and position settings in their own respective style sheets linked via conditional comments. In Internet Explorer 5.5 it looked like a bomb had hit it; that browser couldn't handle a fair bit of the CSS and rather than spend too much time on an obsolete browser I changed a number of things and fixed the width. I basically just wanted to make sure the site would be usable rather than trying to precisely reproduce the design.

Quite surprisingly I had a few strange problems in Opera 9.20, surprisingly because Opera is at least as standards compliant as Firefox if not more so. However there were several oddities that didn't seem to have an easy fix, or at least not a fix that could be achieved simply by tweaking the CSS without those tweaks affecting other browsers. Those issues included:

• displaying the sponsor links at the correct size until the page finished loading, then the text mysteriously shrinking. As these used the same markup and CSS as the other links in the sidebar there was no easy or logical way to fix the problem without affecting the other links.
• text marked up as paragraphs within the content area would magically jump to the right once the page loaded, leaving a small fragment of text behind (a few characters from the last line of each paragraph, chopped off at the top). Again, there was no simple fix without it affecting the positioning in other browsers.
• text link styles were overridden with the browser default ones, again without any logic that I could see. It's possible that one of the settings in my browser profile caused this issue, but I'm not familiar enough with the browser to track it down - so I needed to find another fix.

It's likely that the first two issues were caused by the combination of scripts used on the page, for example the sponsor links are generated by scripts. However as it wasn't feasible to remove those scripts anyway I decided not to test the theory by disabling them on a live site (the issues weren't apparent in my local testing copy). Due to the prospect of a CSS fix affecting other browsers I had to find a hack or filter for Opera, much as it pains me to use them now that it's clear we can control the real problem browser (Internet Explorer 6 and under) using conditional comments. However these issues needed an Opera specific fix and, after a bit of searching on Google, I found a way using an @media declaration to target Opera:

1. @media all and (min-width:0px) {
2. head~body p {
3. margin-left : 0;
4. }
5. #content a, #content a:link, #content a:visited, #skipper a:link, #skipper a:visited {
6. color : #00303e !important;
7. }
8. #content a:hover, #content a:active, #content a:focus, #skipper a:hover, #skipper a:active, #skipper a:focus {
9. color : #870000 !important;
10. }
11. #sidebar #links55315 a {
12. font-size : 11px;
13. }
14. }

The combination of the "@media all" and the "and (min-width:0px)" in line 1 of the code above targets Opera fairly specifically - apparently it has also been shown to target Pre-release versions of Safari too. I had no way of testing this, however I felt it was safe to use the method as I was just emphasising already existing styles rather than trying to impose different ones. Line 2 very specifically targets all paragraphs, overriding any other rules that may be conflicting. Line 3 sets the left margin for all paragraphs to zero (even though this had already been done in the main style sheets), while Line 4 closes the rule set opened in line 2. A quick test in Opera showed that the method worked successfully. Lines 5, 6 and 7, and lines 8, 9 and 10 were used to fix the link colour change, while 11, 12 and 13 were used to fix the resizing of the sponsor link text - using a pixel unit instead of ems was what was needed there. The final line closes the whole thing. That discovery came courtesy of the Tanrei Software blog where there's a useful article on using media selectors for browser targetting.

Other Issues

Rather than use a mass of extra markup and images I chose to use Alessandro Fulciniti's NiftyCorners Cube script for the curved corners, so users without javascript enabled will see the site with square corners. Users with javascript may also have some issues, there's a slight lag in the page load time as the script runs through the targeted elements in order to set the curved corners. It's also possible that the script contributes to the paragraph jumping in Opera, though I've never seen this happen in other sites that I've used the script on.

I use a plugin that dynamically adds classes to various links in order to add an icon to identify the target type (such as an arrow pointing away from a box to indicate external links). One of the icons used was for links to Wikipedia which consisted of a small icon of the Wikipedia logo. However it was hard to distinguish that icon from the surrounding text, so it was removed.

I wanted to use an image of an upwards pointing arrow for my back to top links, but without all of the images being background images (otherwise there would have been no actual content for the links). I achieved it using a combination of foreground and background images with the following markup and CSS:

The HTML

1. <div class="up">
2. <a href="#skipper" title="Back to top">
<img src="http://www.ap4a.co.uk/wp-content/themes/mannequin/images/up.png" width="16" height="16" alt="Up arrow" /></a>
3. </div>

The markup simply creates a div as a container element for the image used as the default-state up arrow and the actual link back to the top of the page.

The CSS - part 1

1. div.up {
2. float : right;
3. margin : 5px 10px 0 0;
4. padding : 0;
5. width : 16px;
6. height : 16px;
7. }

The first part of the associated CSS sets the dimensions of the container div to match the size of the image it contains and positions it where I want it on the page (relative to its own container).

The CSS - part 2

1. div.up a, div.up a img {
2. display : block;
3. padding : 0;
4. margin : 0;
5. }

Part 2 of the CSS sets both the image and the anchor around it to be block level. This corrects Internet Explorer 6's behaviour of adding a 3px space beneath inline images (which is the space preserved for text descenders). It also allows the full area taken up by the image to be a clickable part of the link.

The CSS - part 3

1. div.up a {
2. background : url(images/up2.png) no-repeat center bottom;
3. position : relative;
4. width : 100%;
5. height : 100%;
6. text-decoration : none;
7. cursor : pointer;
8. }

This code sets the link to 100% width and height of the container div to complete the process started in the previous rule set, which allows the full area of the image to be clickable. It also sets the positioning to relative to allow the contained image to be absolutely position within it, and the first line sets the background to be the hover state version of the image. The final 2 lines turn off the underline added to links and ensure that the proper cursor style is used.

The CSS - part 4

1. div.up a img {
2. position : absolute;
3. top : -5px;
4. left : -5px;
5. border : none !important;
6. }

Part four positions the foreground image within its containers so that it precisely and completely covers up the background image. It also makes sure that no border is added.

The CSS - part 5

1. div.up a:hover img, div.up a:active img, div.up a:focus img {
2. visibility : hidden;
3. }

The final rule set is responsible for removing the foreground image when the link is hovered over, revealing the hover state background image. It works as intended in Firefox, IE 7 and Opera 9. In IE 5 and 6 the change in state doesn't work, and IE 5 also needs a slight change in the positioning to cover the hover state image.

No doubt there'll be other issues to find, and they'll be fixed when they are. I'm expecting there to be one or two in Mac browsers, but as I haven't been able to test in them (the Mac testing services I normally use have been broken when I've visited recently) I haven't been able to find them. If you're a Mac user and do find issues, please let me know and I'll do my best to resolve them, thanks.

Dustin Diaz has announced the first annual CSS naked day to take place on the 5th of April. I had wanted to announce my participation in the event prior to my CSS turning off, but I didn't get the chance to and now it's gone.

Some of you may be wondering why I started early - well I haven't really. You see I used the PHP function provided by Luke Wertz to disable my CSS automatically and, as mentioned by Dustin, this will turn the CSS off as soon as it is the 5th of April anywhere in the World, and keep it turned off until it's no longer the 5th anywhere. In other words it's an annual CSS 2 naked days.

To find out what it's all about have a read of the announcement, however it's summed up quite well here by Håkon Wium Lie, the creator of CSS:

This is a fun idea, fully in line with the reasons for creating CSS in the first place. While most designers are attracted by the extra presentational capabilities, saving HTML from becoming a presentational language was probably a more important motivation for most people who participated in the beginning.

Håkon has pledged to take part, along with several hundred other mental people

In a little under 48 hours my CSS will return in a blaze of glory, in the meantime you get to see a more attractive ap4a.

Earlier this week I spent a few minutes tidying up the CSS, removing unnecessary selector duplications, combining identical rule sets, arranging the rule sets more logically, and removing excess white space, and removing whole style sheets that I'd either made obsolete by eliminating the markup they styled, or by including the contents within others that more logically related to their purpose. Basically making the CSS more easy to manage and more logically structured for the way that I work. The reason this was necessary was simply because I was working from someone else's original CSS; CSS that was arranged in a way that they considered logical but to me was haphazard, and only became more haphazard as changes were made, and extra rule sets added. In essence this is only a modified version of the default Kubrick theme for Wordpress.

When I first began to create my own theme for this blog I began by modifying the default which, at the time, seemed like a good idea considering how clean and simple it appeared to be. Looking back it probably wasn't the best idea considering that Kubrick is a very feature rich theme which has a lot of associated template files. What I should have done was either read up on the designing Wordpress themes for public release documentation in order to learn how to do it from scratch, or chosen a simpler theme to develop the basic look from and then added features to that as necessary. That aside I've still managed to learn a fair bit about how the back end of Wordpress works as a result of my tinkering with Kubrick, so it's all good in the long term.

Anyway, as mentioned, a few changes have been made to the CSS. Overall this hasn't had much impact on how the site works in modern browsers, I've tested it and am happy that it looks as intended in Internet Explorer 6 for Windows, Opera 8.52 and Opera 7.23 for Windows, and Firefox 1.5.0.1 for Windows. According to iCapture it also looks right in Safari 2.0.3, so I'm happy with that too. There are a couple of issues on Internet Explorer 5x for Windows however, and possibly IE for Mac - but I have no way of checking that.

In IE 5x for Windows there were, previously, a couple of very minor issues whereby the column side borders didn't quite meet the column headers, being separated by a one or two pixel gap. It was never something that I had bothered to correct as I chose not to use hacks for those browsers to fix a very minor issue in them - considering that they are very old, and very obsolete browsers, and this is a personal site. After the CSS alterations, however, there was slightly more of an issue. In IE 5.5 the third column on the front page dropped down beneath the second column - not something that would cause me any worry by itself, as the site is still fully functional and the drop doesn't detract to much for me to need to fix it for less than 1.5% of the visitors (sorry). In IE 5.01, however, the right-hand column borders were separated by 10 to 20 pixels from the column headers (ie. they were positioned 10 to 20 pixels too far to the right). This was an effect that I'd seen early on in IE 6, and was one that wasn't acceptable. So I've made a couple of minor changes, and even an IE5 stylesheet, to fix the worst of the issues - and after testing in both IE 5.01 and IE 5.5 it seems I've achieved that, with the only outstanding problems being:

1. The Google ads aren't centred. This is easy to fix by using text-align: center; to align them, but I would have to realign anything else that is affected by that and there's a lot that would be affected. All in all it's not enough of an issue to worry about bloating my style sheets in order to fix it.
2. A slight issue with the column headers in IE 5.01 only. If I get the time I may do something to fix that, but it isn't any kind of a priority for me as less than 1% of my visitors use that browser (and those that do could well be me using it for testing, not something that I care to go looking through my raw log files to check on).

Beyond the reorganising of the site's CSS there have been a few other minor changes. A little while ago it was mentioned that the stark black and white colour scheme was a little hard on the eyes, so I softened that with shades of grey. I've also responded to comments by Sarah and Paul, that the site lacked colour, by using colourful versions of new elements that have been added to the site rather than imposing the greyscale colour scheme on them.

I've also overtly linked, using nice colourful icons, to the different versions of the site's feeds to make subscribing easier. I've also included links to various social bookmarking services to the archived version of each post, to make linking individual posts via those services easier on the odd occasion that someone chooses to do so. I will at some stage revise the selection to better target what I consider useful services - which may also include the addition of new services as they become available to the plugin used. I've also expanded the metadata aspects of the site by the inclusion of links to aspects of the Technorati service that apply to this site, as well as the inclusion of a Friend of a Friend profile.

Finally there's also the addition of a couple of features to benefit commentors, such as the inclusion of gravatars on the site to enable them to have a more personalised/branded look to their comments. Also to benefit commentors with their own blogs/sites, I've removed rel="nofollow" from links to their homepage. This is in response to the YesFollow Project that I first read about on Barefoot Boo's blog earlier today. I haven't, however, implemented fully. Firstly, all new comments will have rel="nofollow" in place for the first 3 days in order for me to have time to review the linked site if I feel it necessary, after that initial period it will automagically remove the nofollow from the rel attribute. Second, I have a plugin that adds rel="nofollow" to all links located within the body of comments. I'm leaving this in place as I'd rather not provide endorsements by proxy to third party sites. If I think a site has value to my readership then it's likely to be found in the sidebar links at some point in time - which I'm currently in the process of updating.

So that's pretty much it. Hopefully the changes will prove to be of benefit to some and I'll continue to make changes as I see fit and when time permits, and as the above, hopefully, demonstrates in response to visitor feedback too.