IE7 Modal dialog - Positioning wrong?

Question

Update
I found the actual issue.
In my code I am referencing the height of the overlay, In all browsers except IE7 this is the same as the window size, however in IE7 this is the document size.

So I changed it to reference the window size and it works:).

So my question now is, Why does IE7 do this, and am I correct is assuming IE7 is the foul ball here?

---

Original
I am creating a modal dialog script (for my own use).

The code works perfectly in.

Google chrome, Firefox, IE8+

However in IE7 The positioning is all wrong. Example

These are the positioning values I get in IE9 vs IE7 (keep in mind that the values are smaller than a normal window as i have the dev tools open.)

IE7
left: 367px;
top: 1409px;

IE9 left: 369.5px;
top: 122.5px;

What do I need to do to fix this?

The CSS
Note that this css has some strange rules such as the body tag for testing purposes only.
Note that I am aware that rgba, box-shadow etc does not work in css3 supportless browsers,
I will fix this when the dialog functions properly.

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

Answer 1

Try removing this line:

   body {
        height: 3000px;
    }

Didn't affect FF when I tested, and I really don't see a use for it anyways.

It's always best to remove unnecessary code when you're trying to get CSS stuff to work so you can nail down the source of the problem, unless you think that box-shadow might be related to your positioning problem.