I’ve often been criticised for using tables in my website. I only really use them where I’ve found it necessary, but never-the-less, one table is often one too many for some. “Bad design”, etc, etc.

Well, I’m working on a re-design of the Copy+ site and have been attempted to banish tables from the site entirely. All looked well as I tested it in IE. Then Firefox. Oh my. It was a real mess. I tried to sort it, I really did, but eventually became stuck.

A post to discussion board yielded the following answer.. “the top menu ‘catches’ on your logo_box DIV.” The answer is to add “clear: both;” to my DIV.

So I asked how I was supposed to know this. The answer…

Same way as me. You do something, it doesn’t work, so you google it!

I use it so often that I have it defined as a constant in my PHP.

The other thing that I have done is that I get so fed up of fudging inconsistencies between browsers that I now detect the user’s browser and give them an appropriate css file, not a jack of all trades with indecipherable hacks in.

The conclusion… I’m not supposed to realise this. Instead I have to hack about to get the DIV’s right, probably losing sleep and hair in the process.

But, if I use tables I can get it right first time, without any of the above. Hmmm. Guess what I’m now doing to the new site??

For some time now I’ve been using a great JavaScript utility named Lightbox 2.0. Basically, it displays photos on a web page, but in a very stylish way. You start with a thumbnail, click it, and it expands, the rest of the screen fades out, and with version 2.0, you can then scroll through multiple photos.

If you go to the Lightbox home page, there’s a pretty good demonstration on what it does. I use it on the BMTG site quite a bit, and I’ve used it elsewhere too.

The only problem with it was its use of the Prototype Framework and Scriptaculous Effects Library, which made the whole thing a bit, erm, bulky for what it did.

Now, there is an answer…. Litebox. It’s based on Lightbox 2.0 but it utilizes the 3kb Javacript library moo.fx in association with prototype.lite.

On top of that, Bravenet published their own “theme” for it, making it all look a little swankier.

Well, you can’t keep a good utility down. Just as I used to compress the original Lightbox down to a more managable size, I’ve done the same to Litebox. The result…. Literbox.

What have I done? Well, I’ve compressed the Javascript and CSS. I’ve also compressed and colour reduced some of the images (not that you’d spot the different). It’s saved another 8k. You can download my modded version below, which includes the original demo packaged with it (which I’ve not compressed in any way). There’s also a second package, which is the same thing again but with the Bravenet theme (and again, I’ve compressed the Bravenet changes).

Download Literbox 1.0
Download Literbox 1.0 – Bravenet Theme

Update 1/12/08 – I’ve removed the links to my modified Litebox as I know longer support it. I’ve now moved over to Slimbox, which also uses mootools, but doesn’t require a modified BODY tag (something which was causing me problems).

On a never-ending quest to find useful “extras” for my Blogs and websites, I looked into Tag Clouds earlier this week. You’ll probably have seen them on swanky Web 2.0 sites – groups of seemingly random words of different font sizes. You click on a word to read more on the subject.

These tag clouds are picking words from news feeds and the like, and the words are weighted depending on their use, hence the font sizes.

A quick search of Google immediately showed a free service for bloggers and website owners… ZoomClouds.

Setting up was easy – simply supplying a news feed and a few titles. From here, ZoomClouds goes away and creates the appropriate tags. The site suggests this should take mere seconds, but I found this not to be the case. I left them for a few hours before returning.

At this stage you can now create your design – how the tags will be displayed, including choices of colours, tagcloud width, number of tags, etc. All very easy, and you can even allow your design to be made public for others to use.

They supply the code which you can add to your website and Blog.

This is where I came across my second problem. What they show you your Tag Cloud should look like is not what they’re then looking like on the Blog/website. I first put one on the BMTG site and the colours were limited – you get to choose 4, but it only seemed to be showing 2. After a bit of digging on the ZoomClouds site, I came across a way to make the colours random, which gave a much better result. However, my second Tag Cloud, which I put on my Blog, showed a limited range of font sizes. Now, both of these may be due to a lack of range between the various words, so as most are equally weighted they’re the same size and colour. But just in case I’ve contacted ZoomClouds and posed them this question. I’ll post back when I get a reply.

Anyway, they still look pretty good, and the information they provide is rather handy.

Update 24/01/2008 – Now that I’ve switched to using WordPress, which has built-in tag cloud facilities, I don’t use ZoomCloud.