IE Won't Overlay DIV Position Properly

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
volomike
Forum Regular
Posts: 633
Joined: Wed Jan 16, 2008 9:04 am
Location: Myrtle Beach, South Carolina, USA

IE Won't Overlay DIV Position Properly

Post 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();
User avatar
volomike
Forum Regular
Posts: 633
Joined: Wed Jan 16, 2008 9:04 am
Location: Myrtle Beach, South Carolina, USA

Re: IE Won't Overlay DIV Position Properly

Post 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.
Post Reply