JQuery ui dialog css problem under FF

Question

Hello !

I don't 'speak' english well, pls forgive it to me.

I've a serious problem, soon I'm going to crazy... :-)

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).

Here is a screenshot : http://yfrog.com/jnjqueryuidialogffj

I've spended a lot of hours with it, but no solution.

Please help me guys !

Thanks.

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.