Page 1 of 1

IE Won't Overlay DIV Position Properly

Posted: Fri Jan 09, 2009 12:46 am
by volomike
I'm gunning for a deadline tonight on a project. I have everything working just fine with a settings control panel on a website

...EXCEPT...

IE (any version) is not overlaying a "busy indicator" DIV on top of a form in the proper position. It seems to get width and height exactly right, but not top and left.

Background:

- I'm using jQuery.
- FF2, FF3, Opera, & Safari -- all just fine.
- I have multiple FORM elements on my settings control panel page, changing only a specific setting.
- When you click Save, it's supposed to overlay a white DIV over just the form you're working on, use opacity a little to let what's underneath bleed through just slightly, and show a busy animated GIF on top of that. It does this until it gets an AJAX response back and then hides.

On IE (6 and 7), it's showing the DIV but with a top and left of 0.

What's the catch? My code is:

Code: Select all

var nH = $('#' + sForm).attr('offsetHeight');
var nW = $('#' + sForm).attr('offsetWidth');
var nT = $('#' + sForm).attr('offsetTop');
var nL = $('#' + sForm).attr('offsetLeft');
 
$('#busy')
  .css('position','absolute')
  .css('height', nH + 'px')
  .css('width', nW + 'px')
  .css('top', nT + 'px')
  .css('left', nL + 'px')
  .show();

Re: IE Won't Overlay DIV Position Properly

Posted: Fri Jan 09, 2009 1:34 am
by volomike
The fix was a kludge.

1. Use the jQuery Dimensions 1.2 Plugin and it's .position() property, which returns top and left in an array.
2. Trap for IE6. On IE6, just subtract a fixed x pixels from top and add that same x to the height.
3. Trap for IE7. On IE7, do # 2 but do the x value differently on the first 200 pixels. Why? Heck if I know.
4. Keep tweaking the x until it covers the FORM element properly on IE6 and IE7.