3

By default, many of you know, IE has a 2px border around the body tag. IE considers this border as outside of the regular page. Basically, this means that the document origin is actually at [borderLeftWidth, borderTopWidth].

This poses problems when doing calculations in JavaScript that require both clientXY and screenXY. Since there is a border in between the two values, you have to compensate by adding in the borderWidth. By default this border is 2px (unless you modify the page).

However, since the body can have a user-defined border as well (like 7px solid red), you can't just compensate by adding or subtracting 2px. Obviously, you would need to use the actual value document.body.currentStyle['borderTopWidth']. By default, this returns medium. Since the value medium can vary across browser versions, you would need to perform getPixelValue check (I used: http://blog.stchur.com/2006/09/20/converting-to-pixels-with-javascript/).

When you perform this check, medium returns 4px. But that's not right! The body's border is actually 2px, even though it says its medium. That made me think, IE might render values differently for the body border. But after manually setting the borderWidth to medium, it corrects itself to 4px. For some reason, IE lies about the body's default borderWidth.

So, my question is: is there any way of getting the real value of the body's border? Or is there a way to check whether the user has set the border already (so it no longer is the default 2px). Performing a user-altered-border check would definitely be my last resort, since IE may decide to remove the default border, thus breaking my scripts.

Azmisov
  • 6,493
  • 7
  • 53
  • 70
  • possible duplicate of [Reading non-inline CSS style info from Javascript](http://stackoverflow.com/questions/1098349/reading-non-inline-css-style-info-from-javascript) also http://stackoverflow.com/questions/3953353/how-to-get-computed-style-of-a-htmlelement – Matt Ball Nov 10 '10 at 03:50
  • Hmmm. The problem isn't with generically finding CSS styles, but finding CSS styles when traditional methods (like .style or .currentStyle) fail to retrieve the correct value. – Azmisov Nov 10 '10 at 04:21
  • It is a generic script for web pages; so, it could potentially be any doctype. – Azmisov Nov 11 '10 at 03:18

1 Answers1

0

I had an epiphany in the bathroom this morning, and I've found a solution.

var b = document.body;
var first1 = b.clientHeight;
var first2 = b.clientWidth;
b.style.borderTopWidth = '0px';
b.style.borderLeftWidth = '0px';
b.style.borderTopWidth = first1 - b.clientHeight + "px";
b.style.borderLeftWidth = first2 - b.clientWidth + "px";

Which validates IE's incorrect medium value. If anyone has a better solution, please show it.

Azmisov
  • 6,493
  • 7
  • 53
  • 70