A while back I wrote a post about removing the 3 pixel gap in Hotmail. While that provided a solution for IE I've since discovered another fix that works in Firefox. It's the same problem as before; a 3 pixel gap is added beneath images, particular to images inside table cells. The problem seems to stem from the font size settings, obviously this shouldn't affect a table cell that does not contain text. Chalk it up to yet another That Shouldn't Make Any Difference But It Does™ This time the fix is to add style="line-height: 50%" to the TD tag. You should then end up with the following:

Up until a year ago I'd only ever used Apache to host websites. At Oxeye Daisy we host on Zeus webservers. After a lot of fruitless searching on the internet for guides on how to setup SEO friendly permalinks for WordPress hosted on Zeus I stumbled upon the relevant code. I've finally got around to tweaking and commenting it. I thought I'd post it here in case anyone else is having the same trouble.

First you need to go to your WordPress admin page and set up the permalink structure in Options > Permalinks. I've set mine to /%year%/%monthnum%/%day%/%postname%/ but you may want something different.

The notes in the script assume the requested URL to be http://www.domain.co.uk/blog/2007/10/31/an-example-post/?color=red I've added the GET queries so you can see how they are handled, they're not used in WordPress. This URL is then translated into http://www.domain.co.uk/blog/index.php/2007/10/31/an-example-post/?color=red. Notice the index.php in the middle? That's the key bit to making all this work.

Save the following code in a file called rewrite.script and upload it to your web space. Note that you will need to uncomment some parts of the script depending on whether your blog is in a sub directory or the top level of your site.

The code is currently set to work with a sub directory of blog. It has only been tested on Namesco servers and it's set to ignore their specific hosting folders like webmail, controlpanel and tech_support.

I've been designing and building websites for 10 years now and in all that time I've used a Mac as my working machine along with a PC to test on for IE. Having a spare copy of Windows XP about I bought a copy of the Parallels virtualisation software. I installed Parallels along with XP on an iMac with 1Gb of RAM, it does run on 1Gb but it is fairly slow. I immediately upgraded my iMac to the maximum 3Gb (I really didn't need much in the way of persuasion). With 3Gb available I set the 'PC' to use 1Gb of this, it made massive difference in the speed, it's every bit as fast as the actual PC I had been using for testing.

I now have a 'PC' with XP SP2 and IE6 as well as a 'PC' with XP SP3 and IE7 along with the multiple IE hack running. I also threw on Firefox 3 for good measure. The great thing about using Parallels is the ability to copy the entire PC thus avoiding any cockups with rogue software. I'll probably set up a software testing PC that won't matter if I screw it up. XP uses my existing Mac internet connection so I didn't even have to bother with setting up any of the networking.

I had a go at installing Xubuntu, it did install but so far has no net connection. I will have to look at this further, it would be great to be able to test Linux browser compatibility too.

Finally I can design, build and test websites on one machine.

Over the past few weeks I've been working on a directory website built using phpMyDirectory. Being unfamiliar with the software I've been converting the default theme over to the new design, swapping out the many nested tables for divs in the process. I've managed to remove most of the tables from the theme templates but some remain in the form of generated lists. As I don't want to start fiddling around with the core application files I created this function to tidy up the home page category listings.

My fix will strip out the table and the unecessary ul tags that surround each list element and display the categories as a simple unordered list with the class of category-listing for easy styling.

In the template folder open the index.php and look for the following line:

Comment this line out and then paste in the code below.

I was getting bored with the previous design so I thought whilst upgrading to the latest WordPress I should give the place a new lick of paint. This time I've gone for a typographic style, making more use of spacing and stripping things back. I'm still working out the IE bugs and I haven't even looked at it on a mobile browser yet so it should be considered to be in beta mode.

At Oxeye Daisy we often build small websites (10ish pages). For a website of this size we may use WordPress and bend it into a CMS. While not ideal it does work quite well for our customers who want the convenience of being able to update their site without shelling out a lot of money for something bespoke.

Recently we've had to make some updates to a couple of CMS websites that were built by other agencies. Both times this involved learning each CMS and their idiosyncrasies. This is when using something 'standard' would have been helpful. The only problem is I've tried Plone, Drupal and various others and found them to be way over complicated. I mean, if I can't figure our how to add a page to a section of a website how can I expect customers to use it? A good CMS should be something that someone just 'gets', clear, intuitive, simple.

I think we're getting near the point of having to build our own small scale CMS, which of course leads back to my previous problem with non-standard CMSes. I'll be creating the same problem for someone else in the future. Unless I can find a straight forward off the shelf CMS this is what I can see my next in-house project being.

I use SVN to keep my work files synced to my portable hard drive and work iMac and for keeping some of my other projects synced up with an online SVN account. TextMate is my chosen tool for website authoring so this SVNMate plugin is really useful. To install just download the plugin and drag it's icon onto the TextMate icon. Then open TextMates Preferences > Shell Variables and add TM_SVN and the location of your SVN install, in my case that's /usr/local/bin/svn. I really wish I'd found this sooner.

I recently read Richard Rutter's The Elements of Typographic Style Applied to the Web after reading about it here. The essay makes several mentions of CMSes and the application of tags to help in the display of text. This got me thinking about the shortcomings of CMSes.

CMSes are a great way to empower website owners. Allowing someone to update their own site without needing to learn HTML or CSS. The use of JavaScript text editors like FCKeditor and Tiny MCE mean that people can even add styling to their content.

Since starting to work on CMS based websites some five years ago I've always had a nagging doubt about the code they allow a user to produce. Frequently not accessible, validatable or sometimes even readable. The problem with these editors is you are giving someone the means to completely wreck the look of their website, a website they may have paid thousands of pounds to have designed and built. I believe that part of being a web designer is setting boundaries for users looking to edit their own content. Below is my ideal text editor for a CMS.

I would let users set titles as <h2> - <h6>. I would prevent them from using <h1> as that would be retained for the page heading and generally you only have one of those. Also I would only allow <h*> tags on a maximum amount of words - say 20, to try and stop users from misusing <h*> tags as a means to make text bigger.

I would convert any use of <b> or <i> tags to <strong> and <em> as they are more symantically correct.

I would remove any <font> tags - they have no place in modern web design.

I would remove any inline CSS as this is not content. A CMS should be about editing content not making design changes. That's my job and it's what your paying me for, just because you can set that text colour to red and the background to yellow doesn't mean you should.

It would be great to be able to detect when someone has typed their content all in caps and either convert it to lowercase while informing them that all caps is unreadable. Again maybe set a tolerance of 10 words to allow for any acronyms.

Tables are a difficult subject. They can be legitimately used to display product data but they can also be a source of annoyance to us web designers, they don't always play nice with CSS. I would like to be able to switch allowance of tables on or off based on the type of website - is it a shop or a blog? A shop might need to display product data for example.

Some customers will want the freedom to change the colour of text and font faces and no amount of trying to educate them will change their minds, but for the most part setting some ground rules like the ones suggested above will help users maintain their site to the standard it was authored at. Which will also help with accessibility.

You setup a WordPress based website for someone, create some pages as a part of the site structure and design a menu to accommodate those pages. Having done all of this work you ideally want to protect the client from ballsing the menu and the look of the site up.

The Plan

Setup the top level pages with the admin account. Setup an author level account then download and install the Role Manager plugin. Enable the following for the client login:

• Delete Others Posts
• Delete Pages
• Delete Posts
• Delete Private Pages
• Delete Private Posts
• Delete Published Pages
• Delete Published Posts
• Edit Others Pages
• Edit Others Posts
• Edit Pages
• Edit Posts
• Edit Private Pages
• Edit Private Posts
• Edit Published Pages
• Edit Published Posts
• Manage Categories
• Moderate Comments
• Publish Pages
• Publish Posts
• Read
• Read Private Pages
• Read Private Posts
• Upload Files

Download and install my Protect Title plugin. Now when the client edits a page created by admin they won't be able to edit the title, keeping the menu looking nice.

Snipplr.com is a website where you can store all of your frequently used code snippets. I find it's useful to have certain bits of code accessible from wherever I find myself working. A killer feature for me however is the TextMate bundle. This allows your snippets to be pasted straight into whatever file is being worked on simply by using a keystroke. Snippets can also be saved back to the site via the bundle.

As everyone can view everyone else's snippets I'm finding it a good place to start when trying to figure stuff out.