jQuery breaking in Firefox but good in Safari

Question

Here's the page to reference to: http://dev.thriveafrica.org/invest/

In Safari, when you select one of the monthly options, the box turns blue and expands with some text in it. In Firefox, it turns blue but the box doesn't expand to show the text.

Here's the jQuery behind it. Excuse me if it's messy:

        $('#monthly .own, .you, input[type=radio]').hide();
    $('label.deselected').mousedown(function() {
        $('label').removeClass('selected').addClass('deselected');
        // $(this).removeClass('deselected').addClass('selected');
  $('.you').slideUp('slow');
        $(this).removeClass('deselected').addClass('selected').children('.you').delay(700).slideDown('slow');
        $('label input[type="radio"]').removeAttr('checked').removeAttr('selected');
        $('.donate-monthly').addClass('donate_link_hover');
        $('.donate-lump').removeClass('donate_link_hover');
        $('#donate_lump_input').attr('value','Enter Own Amount');
        $(this).children('input').click();
    });

    $('.change-monthly').mousedown(function() {
  $('.you').slideUp('slow');
        $('.donate-monthly').removeClass('donate_link_hover');
        $('#monthly .own, #monthly .options').slideToggle('slow');
        $('#own_amount').attr('value','');
        $('label').removeClass('selected').addClass('deselected');
    });

    $('#donate_lump_input').focus(function() {
        $('.donate-monthly').removeClass('donate_link_hover');
        $('input.donate-lump').addClass('donate_link_hover');
        $('#monthly label').removeClass('selected').addClass('deselected');
        $('.you').slideUp('slow');
        $('#own_amount').attr('value','');
    });

Here's the HTML so you can see the IDs and Classes that go with it:

    <div id="monthly" class="give">
  <h1>Invest Monthly</h1>
  <p>We know you want to make an impact on the world. Who knew you could make such a big impact? <strong>We did.</strong></p>

    <div class="options">
      <form action="https://www.paypal.com/cgi-bin/webscr" method="post" class="montly">
        <ul>
          <li>
            <label class="radio deselected" for="monthly_25">
              <input type="radio" class="monthly_radio" name="a3" value="25" id="monthly_25">$25.00 a month
              <div class="you">
                You'll be...
                <ul>
                  <li>...able to pay a coaches salary each month.</li>
                  <li>...paying for books for 100 students.</li>
                  <li>...supplying funds for a pastoral training conference.</li>
                </ul>
              </div>
            </label>
          </li>
          <li>
            <label class="radio deselected" for="monthly_50"><input type="radio" class="monthly_radio" name="a3" value="50" id="monthly_50">$50.00 a month
              <div class="you">
                You'll be...
                <ul>
                  <li>...able to pay a coaches salary each month.</li>
                  <li>...paying for books for 100 students.</li>
                  <li>...supplying funds for a pastoral training conference.</li>
                </ul>
              </div>
            </label>
          </li>
          <li>
            <label class="radio deselected" for="monthly_100"><input type="radio" class="monthly_radio" name="a3" value="100" id="monthly_100">$100.00 a month
              <div class="you">
                You'll be...
                <ul>
                  <li>...able to pay a coaches salary each month.</li>
                  <li>...paying for books for 100 students.</li>
                  <li>...supplying funds for a pastoral training conference.</li>
                </ul>
              </div>
            </label>
          </li>
        </ul>
        <input class="donate_link donate-monthly" type="submit" border="0" name="submit" value="Donate" alt="Use PayPal to support us monthly">
        <a href="javascript:void(0);" class="change-monthly">Or enter your own amount...</a>
        <input type="hidden" name="cmd" value="_xclick-subscriptions">
        <input type="hidden" name="business" value="office@thriveafrica.org">
        <input type="hidden" name="item_name" value="Recurring monthly donation to Thrive Africa">
        <input type="hidden" name="no_shipping" value="2">
        <input type="hidden" name="no_note" value="1">
        <input type="hidden" name="currency_code" value="USD">
        <input type="hidden" name="bn" value="PP-SubscriptionsBF">
        <input type="hidden" name="return" value="http://www.thriveafrica.org/helpout/strategicgiving/donation-thankyou/">
        <input type="hidden" name="cancel_return" value="http://www.thriveafrica.org/helpout/">
        <input type="hidden" name="p3" value="1">
        <input type="hidden" name="t3" value="M">
        <input type="hidden" name="src" value="1">
        <input type="hidden" name="sra" value="1">
      </form>
    </div>
    <div class="own">
      <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
        <ul>
          <li>
            <label class="own-amount deselected" for="own_amount">Own Amount:
              <input type="text" name="a3" class="deselected" value="" id="own_amount">
              <div class="you">
                There are no limits here to what you can do to impact South Africa.
              </div>
            </label>
          </li>
        </ul>
        <input class="donate_link donate-monthly" type="submit" border="0" name="submit" value="Donate" alt="Use PayPal to support us monthly">
        <a href="javascript:void(0);" class="change-monthly">Or go back to set amounts...</a>
        <input type="hidden" name="cmd" value="_xclick-subscriptions">
        <input type="hidden" name="business" value="office@thriveafrica.org">
        <input type="hidden" name="item_name" value="Recurring monthly donation to Thrive Africa">
        <input type="hidden" name="no_shipping" value="2">
        <input type="hidden" name="no_note" value="1">
        <input type="hidden" name="currency_code" value="USD">
        <input type="hidden" name="bn" value="PP-SubscriptionsBF">
        <input type="hidden" name="return" value="http://www.thriveafrica.org/helpout/strategicgiving/donation-thankyou/">
        <input type="hidden" name="cancel_return" value="http://www.thriveafrica.org/helpout/">
        <input type="hidden" name="p3" value="1">
        <input type="hidden" name="t3" value="M">
        <input type="hidden" name="src" value="1">
        <input type="hidden" name="sra" value="1">
      </form>
    </div>
</div>

Not sure if I have to tweak/hack something to get it to work of if I just coded it wrong.

Thanks so much!

Answer 1

I inspected your code, which is throwing an error on line 359. I think it's because you are calling the $(document).ready() method in the body of your page, which is not kosher. If you remove that, you're just left with:

$('#other[title]').colorTip({color:'white'});

Instead of:

$(document).ready(function(){
    $('#other[title]').colorTip({color:'white'});
});

Without that error, your code should run in firefox, as long as there are no other errors.