Above the Fold: The Blog

Well, Spam Karma 2 seems to be working beautifully. 12 pieces of comment spam were harvested today without a single one hitting my inbox. The plugin sent me a little digest note to tell me how much it caught, a useful tool that will allow me to check it until I’m confident that it’s doing it’s thing properly, and every bit was obnoxiously evil spam. My email account was threatening to drown under the stuff, so this is good news.

The irritating side of online life has been happening on my fannish website. A kid decided to hotlink straight to a graphic on my site to use as her icon/avatar for a forum. The graphic that she linked to was an icon that I created specifically for people to use as their avatars if they want, but I do state that people should download and save a copy if they want to use it rather than hotlinking.

The most annoying part is that this kid had actually managed to write a script that bypassed my .htaccess file. The forum was for a popular boyband and I managed to track down which icon she was using, so I’ve simply changed the file name on the server. I made a quick check this evening and she has now changed her icon - using one that’s she’s obviously downloaded and saved onto the forum, rather than hotlinking. Hopefully she’s at least learnt that web masters pick up on that kind of usage pretty quickly - that forum was very popular and my web stats went utterly insane, which was an immediate give-away that someone was hotlinking.

I haven’t had someone bypassing the .htaccess before (usually I just get a giggle from the people who have a big “Hotlinking is bad manners!” graphic in the middle of their web page), but it’s certainly taught me that there is a way around practically any protections you attempt to put into sites. Particularly if the culprit is young, determined and obsessed.

My only questions is…why did she chose a Doctor Who icon to use on a Green Day forum? It wasn’t even a David Tennant icon!

Today I logged into my computer after not checking my abovethefold emails for a few days because it was too darned hot to even think about turning on a computer that would pump hot air into my room for hours. It was not a good sight to see twenty comment notifications from this blog arrive, all of them spam. Four of those arrived in the space of six hours this morning. Wordpress has no filters built in for this stuff, but this is where the beauty of plugins comes in.

I thought about getting a plugin that would add one of the captcha picture tests to the comment page. It’s a useful way of filtering out the spam bots on registration forms and password retrievers for Yahoo!Messanger (although I’d argue that Y!M has got their capcha things set to be much too viscious) but seemed too fiddly and unwelcoming for a blog. I also considered setting this blog to only allow comments from registered users, but that’s definitely overkill. What I looked for was something that would filter out the spam, enable me to check the filters every few days in case it caught legitimate comments and only use captcha if the comment is borderline and needs further verification. It should be completely invisible to real users - ensuring this blog is accessible and usable.

As an experiment I’ve downloaded and installed Spam Karma 2 to start dealing with this because it filled all those requirements and gave me more control than I thought I’d get. In the three hours it’s been installed, it’s caught three pieces of spam already and none of that hit my inbox. Score!

Of course, the really interesting bit will be seeing whether real comments get through so I’m always happy to have some experimenters.

I had a post in my head about the death of free content on the Internet and possibly a Chicken Litten type story on a recent LiveJournal kerfuffle, but that will have to wait until tomorrow. I need to get the hot air box turned off!

As documented yesterday, I managed to get the ‘acorns’ in the left-hand navigation bar fixed but had to take them out of the right-hand bar because I couldn’t replicate the trick. A little midnight musings brought the answer.

The code for the left-hand navigation elements is adapted from gavlinne’s original suggestion on the webdev journal:

div#nav-left ul#nav {
padding: 0;
margin: 0 0;
list-style-type:none;
}

div#nav-left ul#nav li {
margin-left : 25px;
float : left;
}

/* Hide hack from IE5/Mac \*/
* html div#nav-left ul#nav li {
margin-left: 12px;;
}

div#nav-left ul#nav li a:link,
div#nav-left ul#nav li a:visited,
div#nav-left ul#nav li a:hover,
div#nav-left ul#nav li a:active {
color : #813817;
text-decoration : none;
display : block;
padding : 7px 5px 7px 35px;
margin: 0;
background: url(images/acorn01.gif) no-repeat left center;
}

div#nav-left ul#nav li a:hover,
div#nav-left ul#nav li a:active {
text-decoration : underline;
}

This all forced IE to see the ‘acorns’ my specifiying all the states of the a: tage and works perfectly well for a single-level navigation bar. In this blog, the right-hand navigation bar has multiple layers and for once IE displayed them as I intended when using this code, but Firefox didn’t. That’s actually a sign of IE playing up rather than Firefox, because Firefox quite rightly got confused by the float:left and sent things everywhere. The code above had an extra layer of ‘ul li’ added to anything that originally stated ‘ul li’, but there was nothing clearing those floats so the first layer of the list confused itself.

The trick was a slight adaptation below (in bold):

div#nav-right ul {
padding: 0;
margin: 0 0;
list-style-type:none;
}

div#nav-right ul li {
clear: both;
padding-top: 20px;
}

div#nav-right ul li ul {
padding-bottom: 20px;
}

div#nav-right ul li ul li {
margin-left : 25px;
float : left;
padding-top: 0;
}

/* Hide hack from IE5/Mac \*/
* html div#nav-right ul li ul li {
margin-left: 12px;
}

div#nav-right ul li ul li a:link,
div#nav-right ul li ul li a:visited,
div#nav-right ul li ul li a:hover,
div#nav-right ul li ul li a:active {
color : #813817;
text-decoration : none;
display : block;
padding : 7px 5px 7px 35px;
margin: 0;
background: url(images/acorn01.gif) no-repeat left center;
}

div#nav-right ul li ul li a:hover,
div#nav-right ul li ul li a:active {
text-decoration : underline;
}

That was the only adapatation needed and it worked like a dream. A little bit of fiddling with padding to ensure that the category headings don’t bump into each other, and the navigation is now working as intended in IE6, Firefox and Opera.

Although I suspect that it still explodes nicely in IE7.

With a little help from a friend, I managed to fix the acorns in the left-hand menu! It turns out that IE gets thoroughly confused occasionally and needs some elements specified in the CSS down to the nth degree before it will work properly. Sadly, I haven’t been able to replicate the same trick on the right-hand menu so I’ve done a little hacking around so that the right-hand menu has no acorns. Poor, deprived menu.

The acorns are still there in all other sensible browsers, though.

That trick also doesn’t work with the blog post titles, so they’re still being hacked around to work dully in IE and work in full, maple-leaf glory in Firefox, Opera etc.

One day, Microsoft will release a browser that actually does the same things that other browsers do and we’ll be able to junk all the hacks. Until that day, we just have to find new ways to work with the ‘undocumented features’.

I have spent a productive Bank Holiday weekend skinning this blog so that it now matches the rest of the site. Happily, it turned out to be much easier than I’d thought because WordPress is so well designed.

The re-work did require a few minor tweaks to the main site layout, turning it from a two-column layout to a three-column layout so that everything would fit well. A List Apart came to my rescue with this great article on three column layouts with liquid centre column and fixed sidebars. I was actually going there for something else, but when I spotted the article titled “In Search of the Holy Grail” after seeing several similar articles over the last few months, I had to give it a try. And the best bit is that it works in IE6 (with a hack or two), Firefox and Opera. I’m informed that it explodes nicely in IE7, though, so hopefully the community will be coming up with a few hacks to get around Microsoft’s latest insanity.

In fact, the only thing that the new layout doesn’t do properly is the little acorns in the left-hand navigation bar and ocassionaly in the right-hand bar. They display perfectly in Firefox and Opera, but randomly disappear in IE6. Damn.

If you’re viewing this in IE6, you will also miss the lovely little maple leaf motifs that decorate the post titles because, again, IE6 is randomly not displaying them. So I used a hack to pull those out and align the post titles properly. Firefox and Opera users can see the blog in its full glory.

Of course, I didn’t spend the entire weekend buried in code because that would be far too geeky. Nope, I braved the mud yesterday to venture into the local woods for a bit of a walk and a photo opportunity - it’s rhododendron season and I couldn’t resist. I will hopefully be updating the gallery with some results soon. But playing around with PHP, XHTML and CSS for a weekend after weeks of only seeing VBA and SQL at work was actually a lot of fun. I really am turning into a sad geek