"Something" is breaking this jqueryui dialog. What is it?

Question

I don't mean to be vague, but I'm not sure what is going on.

This code works:

this.J.button_update.click(function () {
    self.J.dialog_hold.dialog({
        resizable: false,
        modal: true,
        width:  305,
        height: 360
    });
});

It produces:

As you can see there is plenty of room on the right border. What you may not notice is that all my content is off centered by about 5px. To fix this I thought I would just decrease the jquery dialog width by 5px as such:

        width:  300,  // decreased by 5

However this breaks the dialog for some reason. It produces this:

How can I troubleshoot further?

A fiddle of the issue has been provided below:

Answer 1

Go to developer mode in firefox and inspect the element one by one for its width and other properties..It will help you in finding the problem..

Answer 2

It turns out that the file_input element is not being detected by the browser element inspector for Firefox. Not sure why. Because the opacity was set to 0 it could not be seen. The complicating factor is that it could not be inspected. Or more precisely only part of the element is inspectable. I found this by removing elements until the dialog became "unbroken". Then I turned the opacity up for this element to see that it was breaking the dialog.

This some what lengthy process could have been shortened if the DOM inspector would have detected the offending element.

I'm going to file this as a bug against the DOM inspector as it only highlights part of the file input even though it detects the other part of it. Very misleading.