jquery ui progress bar problem in Firefox

jquery ui progress bar problem in Firefox

Hi folks,

I'm having the strangest problem. I'm using the jquery ui progressbar and it is working perfectly in IE, yet, style is all messed up in Firefox.

In Firefox, it's like the left  and right borders are both butting against each other in the middle of the screen, and the two bottom borders that comprise the 'progress' of the progress bar are also butting against each other. Therefore, I have no fill color which results in a two pixel progress bar. I tried setting height to 24px, no luck. Here is a screenshot of what it looks like in IE and Firefox:


Firefox (3.6):

Here is my code. Nothing has been changed in the js file.

  1. $("#progressBar").progressbar({ value: 0 });
                    $("#progressBar").css({ 'width': '75%', 'height':'25px' });
                    $("#progressBar > div").css({ 'height': '100%' });

  2. <div id="progressBar"></div>
  1. function submitPostUsingAjax() {

                $("#loadfilesbutton").css("display", "none");
                $(".removeLinks").css("display", "none");
                $("#btn_Prev").css("display", "none");
                $("#btn_Next").css("display", "none");
                $("#canceluploadbutton").css("display", "inline");
                $("#progressBar").css("display", "inline");
                $("#statusBar").css("display", "inline");

                try {
                    $.timer(1000, function checkProgress(timer) {
                               method: 'get',
                               url : '../FileUploadServlet?cancel=' + cancel,
                               dataType : 'text',
                               cache: false,
                            success: function (text, timer) {
                                 if (text.length > 1) {
                                     $('#progressBar').progressbar('option', 'value', text);

                         var progress = $('#progressBar').progressbar('option', 'value');

                         //if (cancel == true) {
                         //    progress = 100;
                         if (progress == 100) {
                             $("#progressBar").css("display", "none");
                             $("#statusBar").css("display", "none");
                             if (cancel == true) {
                                 cancel = false;
                             } //else {
                             $("#canceluploadbutton").css("display", "none");

                } catch(e) {
                    alert('submitPostUsingAjax() failed, reason: ' + e);
                } finally {
                return false;

If anyone has some insight as to why this is happening, I will be forever thankful. Hopefully the answer is not staring me in the face!