Fun with Photoshop and cross-browser CSS

The consensus wasn’t to go live with the new site straight away after all but to create a better impression on the public by waiting on the final design and within no time at all Jordan had worked his graphical magic and delivered the goods.

I was supplied with a .psd mockup and got busy with Photoshop. I hadn’t used this app in a while and it took some time to relearn how to use it but I managed to cut things up and proceeded to get stuck into the CSS.

Again I had to revisit some skills I hadn’t used since I started my current day job and when I looked at my first iteration in Internet Explorer I nearly cried.

Areas of difficulty I had were mainly concerned with how different browsers implement the box model and I also had to jump through some hoops to get opacity working but the end result is a consistent look across Firefox 2.0.x on Windows & Mac, Safari 3.0.x on Mac and IE 6.0.x on Windows. I haven’t had a chance to test it with IE 7 but I imagine it is as broken as it’s younger sibling ;)

I’ve already been working on the release process so there’s just a few minor tweaks to go and the new site will be available in production.