JQuery ui dialog css problem under Firefox

Question

I got a job : There is a website, that is contains some ExtJ functions. I have to change these to JQuery functions.

I'm started to change dialogs. Under IE8 / IE7 it works fine, but under FF 3.5.10 it's not perfect.

The code I'm using is :

<div id="dialog-lostpassword" title="Elfelejtett jelszó">
  <p class="validateTips">Kérjük adja meg az e-mail címét:</p>

  <form>
      <fieldset>
        <label for="dialog_lostpassword_email">E-mail:</label>
        <input type="text" name="dialog_lostpassword_email" id="dialog_lostpassword_email" value="" class="text ui-widget-content ui-corner-all" />
      </fieldset>

      <div align = 'center'>
        Ha Ön még nem rendelkezik hozzáféréssel, <a href = '../regisztracio.op'>itt regisztrálhat</a>!
        Elfelejtette jelszavát? <a href="javascript:showLostPasswordWindow();" >Ide kattintva</a> igényelhet újat!
      </div>

    </form>
</div>

The Javascript:

function showLostPasswordWindow() {
    $('#dialog-lostpassword').dialog('open');
};

$(function () {
    $("#dialog").dialog("destroy");

    var dialog_lostpassword_email = $("#dialog_lostpassword_email"),
        allFields = $([]).add(dialog_lostpassword_email),
        tips = $(".validateTips");

    function updateTips(t) {
        tips
            .text(t)
            .addClass('ui-state-highlight');
        setTimeout(function() {
            tips.removeClass('ui-state-highlight', 1500);
        }, 500);
    }

    function checkLength(o,n,min,max) {

        if ( o.val().length > max || o.val().length < min ) {
            o.addClass('ui-state-error');
            updateTips("Az e-mail cím hossza " + min + " és " + max + " között kell legyen" + ".");
            return false;
        } else {
            return true;
        }

    }

    function checkRegexp(o,regexp,n) {

        if ( !( regexp.test( o.val() ) ) ) {
            o.addClass('ui-state-error');
            updateTips(n);
            return false;
        } else {
            return true;
        }

    }

    $("#dialog-lostpassword").dialog({
        autoOpen: false,
        height: 250,
        width: 380,
        modal: true,
        buttons: {
            'Küldés': function() {
                var bValid = true;
                allFields.removeClass('ui-state-error');

                bValid = bValid && checkLength(dialog_lostpassword_email,"",6,80);
                bValid = bValid && checkRegexp(dialog_lostpassword_email,/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i,"Hibás az e-mail cím formátuma.");

                if (bValid) {
                    // ha 'Küldés' gombra kattintotunk és valid minden
                    $(this).dialog('close');
                }
            },
            'Mégsem': function() {
                $(this).dialog('close');
            }
        },
        close: function() {
            allFields.val('').removeClass('ui-state-error');
        }
    });
});

The problem is :

In FF when I call showLostPasswordWindow() function the dialog shows up, but it is empty, doesn't contains the input field and the texts. Input field and texts are in the background, they are part of the main site (they are at the top of the page).

Answer 1

Hmm...you could try using Firebug console to check for js console errors, and also to look at the markup and see what's going on.