If there’s one thing I hate more than people completely ignoring the symantecs of markup and the way in which it can make some people cringe.. it’s organisations propigating exactly that. One of the most commonly seen examples is that put forward by the biggest search engine in the world. You got it, our good buddies over at Google. Their searchbars don’t even validate as web-standard in HTML4.01, so there is absolutely no hope of them working properly in today’s mostly XHTML-driven web community.

Another such wonderful example is that put forward by our good friends at Make Poverty History (Hey, they must be cool, I’ve got them featured on every page of my site). While I support them and their cause, I have to say.. their code sucks massive arse. The standard format it is provided in is an encapsulated Javascript, in which it contains conditionals, an object map, a polygon, and a whole lot of CSS. I bet you’re saying that’s not so bad.. but running the contents through W3C’s Validator Service, we find a mass of errors. (7, in the space of 2 lines of code, actually).

So.. not only is it enclosed in a Javascript, but it’s also invalid, even in HTML4.01 Spec. What’s my grief with this you ask? From a development point of view, this is absolutely horrible when it comes time to validate your work.. even though your markup is 100% correct as set forward by W3C, your page is still invalid. In a modernised web-community where Web Standards are being followed and recommended more and more by website authors across the world, this is a huge thing for organisations to drop the ball like this.

So what’s my solution you ask? Simple. I’ve taken the evil code and cleaned it, making it 100% valid (In all types of XHTML and HTML, as well as CSS) so your websites don’t freak out when they get put through their paces. Adding it to your webpage is simple, add the following to your style element:

• Make Poverty History - CSS

Open that file, and add it to your existing stylesheet (Pending you have one, that is). That will give the basic information your browser needs to maintain position and appearence of the band. This information can also be given in the form of an @import declaration to make things even tidier (eg. @import URL("http://newklear.org/files/mph.css");). I’ve decided to let people use this off of my server, because I’m more than happy to spend my bandwidth on a good cause.

Now, what we need is the markup to make that CSS actually work. Put the markup from the following file in your document just after your body tag and before your content:

• Make Poverty History - Markup

Open that file, and cut and paste the contents to your webpage. Or, if you’re running a PHP webpage, you can also do a PHP Include (

). This will place the band in the top right-hand corner of your page, and will make the link active when it is hovered over (It only activates over the band, which is nifty). If you wish, you can also add an opacity property to the CSS, to make it fit in with your layout better.

This saves a lot of hassle in terms of validation, and in terms of people having their Javascripting support turned off. Now, if only some of the big names would follow suit when providing code to people…