Update
After some investigation, I discovered the root cause of the problem. In my code, I was referencing the height of the overlay, which resulted in different values in IE7 compared to other browsers. To resolve this issue, I adjusted the code to reference the window size instead, which fixed the problem :).

Now, my question is, why does IE7 behave this way, and is it safe to assume that IE7 is the culprit in this scenario?

---

Original
I have been working on a modal dialog script for my own use.

The script functions flawlessly in:

- Google Chrome - Firefox - IE8+

However, in IE7, the positioning of the dialog is completely off. Check out this example for reference.

Here are the positioning values I obtained in IE9 vs IE7 (note that the values are smaller due to the developer tools being open):

IE7
left: 367px;
top: 1409px;

IE9 left: 369.5px;
top: 122.5px;

What steps should I take to rectify this issue?

The CSS
Please note that the CSS includes some peculiar rules, such as targeting the body tag for testing purposes only.
Also, be aware that features like rgba and box-shadow do not work in browsers without CSS3 support. I will address this once the dialog functions as intended.

body {
  padding: 0;
  margin: 0;
  color: #fff;
  height: 3000px;
}

#modal-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  display: none;
}

#modal-dialog {
  display: none;
  background: #000;
  border-bottom: 1px solid #141414;
  border-right: 1px solid #141414;
  border-top: 1px solid #121212;
  border-left: 1px solid #121212;
  position: absolute;
  z-index: 99999;
  -webkit-box-shadow: 3px 3px 10px #000000;
  -moz-box-shadow: 3px 3px 10px #000000;
  box-shadow: 3px 3px 10px #000000;
}

#modal-element{
  margin-top: 16px;
  overflow-x: hidden;
  overflow-y: auto;
}

#test, #test2 {
  display: none;
  width: 800px;
  padding: 5px;
}

#test2 {
  width: 600px;
}

#modal-close {
  position: absolute;
  background-image: url('close.png');
  width: 16px;
  height: 16px;
  top: -5px;
  right: -5px;
  cursor: pointer;
}

#modal-title {
  position: absolute;
  top: -10px;
  left: 5px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}

#modal-close:hover {
  -webkit-box-shadow: inset -1px -1px 10px rgba(0,0,0,0.8);
  -moz-box-shadow: inset -1px -1px 10px rgba(0,0,0,0.8);
  box-shadow:  inset -1px -1px 10px rgba(0,0,0,0.8);
}

#modal-close:active {
  -webkit-box-shadow: inset -5px -5px 10px rgba(0,0,0,0.8);
  -moz-box-shadow: inset -5px -5px 10px rgba(0,0,0,0.8);
  box-shadow:  inset -5px -5px 10px rgba(0,0,0,0.8);
}

The Javascript

(function($) {

    $.widget("hailwood.modal", {

        options: {
            width: null,
            height: null,
            title: '',
            closeOnEscape: true,
            modal: true
        },

        self: {},

        _create: function() {

            //setup our elements
            var self = this;

            this.body = $('body');
            this.content = self.element;
            this.place = $('<div id="modal-place" style="display:none;"></div>');
            this.dialog = $('<div id="modal-dialog"><div id="modal-element"></div></div>');
            this.stuff = $('#modal-element', this.dialog);
            this.overlay = $('<div id="modal-overlay"></div>');
            this.title = $('<div id="modal-title">' + this.options.title + '</div>');
            this.closeButton = $('<div id="modal-close"></div>');


            //shove the placeholder element in
            this.content.after(this.place);

            //capture width and height
            this.orig_width = (this.options.width === null ? this.content.outerWidth(true) : this.options.width);
            this.orig_height = (this.options.height === null ? this.content.outerHeight(true) : this.options.height);

            //insert elements into the dom
            this.body.prepend(
                    this.overlay.prepend(
                            this.dialog.prepend(
                                    this.stuff.prepend(this.content)
                                    )
                                    .prepend(this.closeButton)
                                    .prepend(this.title)));

            //make the content visible
            this.content.show();

            this.refresh(this);

            //show the overlay and dialog
            this.overlay.fadeIn('medium', function(){
                self.dialog.show('slide', {direction: 'down'}, 'medium');
            });

            //setup the resize handler
            $(window).resize(function() {
                self.refresh();
            });

            this.closeButton.click(function() {
                self.close();
            });

            if (this.options.closeOnEscape)
                $(document).bind('keyup.hailwood.modal', function(e){
                    if (e.keyCode == 27)
                        self.close();
                });

            //setup close handler
            this.self = this;

        },

        close: function() {
            this.destroy();
        },

        refresh: function() {
            var self = this;
            if (self.overlay.length == 0 || self.dialog.length == 0)
                return false;

            self.height = self.orig_height;
            self.width = self.orig_width;

            //make an adjustment to the height if it is bigger than the overlay
            var s1 = self.height;
            self.height = (self.height > self.overlay.height() ? self.overlay.height() - 20 : self.height);

            var diff = (s1 === self.height ? 0 : 16);

            //set the dialog height and width
            self.dialog.height(self.height);
            self.dialog.width(self.width);
            self.stuff.height(self.height -diff);
            self.stuff.width(self.width);

            //position the dialog
            self.left = (self.overlay.width() / 2) - (self.dialog.outerWidth() / 2);
            self.top = (self.overlay.height() / 2) - (self.dialog.outerHeight() / 2);

            self.dialog.css({left : self.left, top  : self.top});

        },


        destroy: function() {
            var self = this;
            self.dialog.hide('slide', {direction: 'down'} ,'medium', function() {
                self.place.after(self.content.hide());
                self.place.remove();
                self.dialog.remove();
                $(window).unbind('.hailwood.modal');
                $(document).unbind('hailwood.modal');
                self.overlay.fadeOut('medium', function() {
                    self.overlay.remove();
                });
            });
            $.Widget.prototype.destroy.call(this);

        }
    });
    /*
     * Remember what I said in the first comment?
     * we pass in jQuery here so it gets aliased as $
     */
})(jQuery);