While doing some front end work yesterday. I got trapped by a jQuery issue. Well not JQuery specific. The issue was actually triggered by some other hand crafted code. Every time i would click a link inside my grid view firebug would throw an error.

uncaught exception: Syntax error, unrecognized expression: .

And the markup that triggered the error was

Nothing wrong there right? And it actually took my quite some time to figure this one out. It would be nice to have a tool that can tell you there are multiple click events assigned to a element? But for now it was just some manual searching and testing.

The issue was caused by an other snippet of Javascript code inside another .js file. This piece of code attached a click event to every div inside a grid td. Which may be a bit to greedy.

$('.admin .gridbg tr td span').click(function() {

And my link was in a nested td inside the grid. And also contained a span tag. So it was actually firing off two click events. From which one failed. Fixing it after that was easy. Either make the first click binding less greedy. Or change the markup of my second grid. I choose the last one.

Yesterday i got a message that the new generation of elePHPants are available for bulk pre-order. I am very happy the elephpant.com site is finally up and running. For the past two years i have been shipping a lot of these blue guys all across the world. No need for me to do that any more.

A big thanks for this furry blue creature goes out to:

Vincent Pontier
Damien Seguy
Christophe Villeneuve
Cesar Rodas

I entered a design for the PHP Community Spirit T-Shirt Design Competition. And it got approved today. It’s a simple design that uses the PHP logo colors and font. If you like it you can vote for it by following the design below.

This long Easter weekend gave me some time to create a new theme for this blog. So after a day of work this is the result. I was a bit tired of the dark unreadable format. At the moment i am still tweaking here and there but it looks fine!

When designing pages for multiple browsers. It’s pretty much a pain in the ass to get things looking similar cross all browsers. There are many Javascript libraries to help and ease the pain. But it doesn’t solve all. And hoping people will stop using IE 6 also doesn’t really help. So we are stuck in getting things work in all those quirky browsers. So a developer / designer probably has multiple browsers installed. On my dev box i only use Firefox.

But when i have to build a design. I need to check al those browsers. So i have Firefox, Opera and Internet Explorer installed. The problem with internet explorer is that you can’t run multiple versions on the same machine. Well at least not without a long hacking session. To solve this problem most of the time i used something like Virtual Machine or Virtual Desktop. The problem is that applications like that eat memory. And there is always the minor annoyances with losing focus on my IDE because the VM window is still active.

Some time ago. My coworker Bart send a link to a tool called IETester. This nice little (24mb) tool let’s you run multiple versions of Internet explorer on one machine. It’s possible to test pages in version 5.5 and up. even the upcomming (still in beta) version 8 is supported. At the time of writing it is still in alpha stage. But it works great. I did have some unexplainable crashes. And there are some known issue’s like:

• When resizing, the content may disappear. I am working to correct it on the next version.
• The Previous/Next buttons are not working properly
• Focus is not working properly
• Java applets are not working
• Flash is not working on IE6 instance.

Besides that it does what it’s build for. A nice tool to add to your arsenal.

Lately i’ve been working on a project. And one of the requirements is that the user interface works from IE 6 and up. Now i have to admit that it’s been a while since i did CSS. And forgot what a pain it is to get things working cross browser. There is always those little irritating IE 6 bugs that double your working time because you either need to fix a bug. Or because you need to create a different stylesheet for a certain browser.

So when i hit the 3 pixel gap bug in IE 6 again. I wanted to start and create a javascript based fix. But first did a google search. To see of nobody had the same genius idea. And low and behold. Somebody did. I found this great little Gem ie7-js It’s a Javascript library created by Dean Edwards. For a lot of things their already were fixes floating around the web. But this has it all. It fixes the PNG alpha transparency bug in IE 5.5 and 6.0. Makes sure the :hover element is not only usable on <a> elements. And a whole lot more. The new IE8-js version is even more complete. And adds advanced CSS selectors and properties.

Using it is as simple as including this in the header section of your (X)HTML:

<!--[if lt IE 8]>
<script src="IE8.js" type="text/javascript"></script>
<![endif]-->

*demo http://ie7-js.googlecode.com/svn/test/index.html

*site http://code.google.com/p/ie7-js/