Broken jQuery/CSS in Firefox - ColorBox and reCAPTCHA

Changing the submit button from type submit to type button will prevent the form from being submitted.

http://jsfiddle.net/tfcuA/

If you click a submit button you'll need to "jam" the default submission behaviour by returning false or using jQuery's preventDefault.

Otherwise have you Captcha handling code trigger from onsubmit on the form.

You can stop the normal event of the click by adding something like this:

$("#linkButtonId").click( function (event){
 event.preventDefault(); event.stopPropagation();
 // things that should happen in this function on click
});

more info on preventDefault and stopPropagation can be found here

This will prevent the submitting of your form or in my example the click on a link.

I'd tidy the JS up a bit into a single document ready, and move the place where the function showHeader is defined to before where it is called.

However, I think the main problem is being caused by the fact that inside the captcha div you have a script from Google that loads the Captcha content. I've seen something similar in the past with Colorbox and dynamically added content (in that case it was videos).

The solution is to separate the contents of the #recaptcha div into a separate file and let Colorbox inject it into the DOM onclick.

$("a.captcha").colorbox({
    width: "30%",
    href: "recaptcha.html" //or .php or whatever
});

Edit: I edited the JSFiddle provided by Metalshark (+1 for jsfiddle - superb resource) to show that your jQuery works fine: http://jsfiddle.net/tfcuA/13/ > This revision simply replaces the recaptcha with some test content that isn't dynamically loaded from elsewhere and it works, suggetsing that that the separation solution ought to work as well.