IE7: offsetLeft

[Frinavale]

IE7 has a bug regarding the offsetLeft.
It always returns 0 even if the element is not at left:0.

Well to be fair the element is at left:0 with respect to it's parent element...but the element is not actually at left:0 because some parent (or grand parent...) element has a style that positions the element away from the left side of the page.

**sigh**

This has made a mess, once again, of my JavaScript and my server control code too because I had to add code that exposes the ID of the parent/grandparent element that is being directly effected by the positioning move.

This bug does not exist in IE8... nice of them to fix it...but at the same time the fix is useless to me since I have to support 7.

Anyways, what I'm trying to do is pretty straightforward.

I want to display a <div> with a position:absolute style over top of the content that is being processed so that the user doesn't try to do something with data that is being worked on.

The thing is that the <div> that is displayed over top of the content is within another <div> that has a position:absolute style. This is so that the parent div can cover up the ASP.NET control that the the "blocker" control is "attached to".

I recently found a case where I wanted to use 1 of these blockers for more than one ASP.NET control....so that means it's not "attached to" anything.

Originally I had the control cover the entire page but decided that the buttons at the top (that let the user access help or logout) shouldn't be covered....and neither should the page's logo section at the top of the page.

So I just wanted to cover the "content" section of the page. This seemed easy enough because the page's content is within a <div> and I know the ID of the div...all I had to do was move the <div> that blocked the content over top of the main "content" section and expand it's width and height to match it.

Easy enough except the fact that the parent <div> of the blocker <div> has the position:absolute style....fine I can get a reference to the this div to.

So I decided to move the parent <div> so that is over top of the main content section of the page.

This is where the offsetLeft property is really messing me up...

Even if I retrieve the main "content" section's offsetLeft property it's Not Right...and I don't know why.

I removed all padding and margin styles from the content section and it's still off by (I don't know) 10 or so pixels.

Anyone have any ideas on why the offsetLeft property in IE7 is always wrong...and how I can get around the problem?

-Frinny

[gits]

you might have a look here ... probably section 2.2 ...

kind regards

[Frinavale]

Thanks Gits!

I didn't come across this article when I was looking for answers.
I don't really want to check for browser version (I've managed to implement scripts that aren't dependent on browser versions so far) but in this case I might just have to.

It's actually section 2.1 that applies to my particular problem.

-Frinny

[Frinavale]

This got a bit too buggy so I gave up and decided not to cover just the content portion of the page.

If the blocker isn't attached to a particular control it blocks the whole page instead of just the portion that I wanted to block.

Thanks a lot for your help.

-Frinny

[gits]

as always crappy IE is causing problems :) ... basicly to handle all such cross-browser issues for yourself will lead to a quite big portion of code ... once you start with it then you probably will create an open ended issue list ... i mean: solved this issue, so why not the next one and so on. if you could find a quite lightweight lib which covers the problem i would suggest to use that ... or do what you did: just avoid a feature that causes such issues :)

kind regards,
gits