CODEWITHSUNDEEP
jquerycssinternet-explorer
Volomike
Volomike

Reputation:

Is There Something Wrong with IE's CSS Top And Left?

The following jQuery code works just fine for me with Safari, Opera, FF2, and FF3. It positions a busy DIV (with an animated busy GIF) on top of a FORM element on my web page. The problem is that in IE6 and IE7, it gets width and height properly, but doesn't seem to get top and left properly. What's the catch?

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

Note that on my page I have multiple FORM elements. (The reason for the busy GIF is because I'm doing an AJAX post in the background when a form is submitted.)

Note I also tried the jQuery Dimensions Plugin 1.2's .position() value for top and left, and that helped, but seemed to have the top value become more off the further I moved down in the page.

Upvotes: 0

Views: 4073

Answers (3)

Ricardo Vega
Ricardo Vega

Reputation: 1975

Right now jQuery (latest public release) includes dimensions as core functions.

Try using $(element).offset() (it returns an object with "left" and "top" properties). I've used it a lot and works just perfect for many many browsers (ie6/7, opera, safari, chrome, ff2/3)

Upvotes: 2

brian
brian

Reputation: 3394

Are you sure the element is set to display:block? Also you can avoid multiple calls to the css function by passing a hash like this:

$('#busy')
    .css({'position':'absolute',
          'height': nH + 'px',
          'width', nW + 'px',
          'top', nT + 'px',
          'left', nL + 'px'})
    .show();

Upvotes: 0

Volomike
Volomike

Reputation:

I got it to work with the jQuery Dimensions Plugin 1.2's .position() value for top and left. (It returns an array where you can get top and left array values.) The fix was that I have to trap for IE6 and just subtract some fixed number (12px in my case) for top, and add that same number on height. On IE7, I could do the same thing, but had to do the top and height math differently for some reason on the first 200 pixels or less. Your situation may be different, depending on your previous CSS, your reset.css, and so on.

Upvotes: 0

Related Questions