[SOLVED] Difficult page size issue (NOT window size)

[obsidian]

Well, I'm playing around with some code for a lightbox type application, and I've gotten everything working well, but I have a small issue with my height and width in firefox. Believe it or not, this is one of the only times I've got something working perfectly in IE, but I can't figure out my issue with firefox. Take a look at my lightbox test page here:

 

http://sandbox.guahanweb.com/lightbox

 

Please take note that I am not simply trying to calculate the height of the window or viewable space, but rather I am trying to calculate the size of the entire document (document.body or document.documentElement depending on your browser choice).

 

If you click on the "Click me" link at the top of the page, you'll notice the overlay works quite nicely and the lightbox centers itself just like I want. The problem is twofold, and I can almost guarantee they're related:

 

1) If you scroll to the bottom of the page in Firefox, there is a very subtle gap in the overlay of about 15px or so. I've tried every combination of things I could think of to get rid of it, but to no avail.

 

2) Similarly, when you open the lightbox in Firefox, you get a horizontal scrollbar for about 15px to the right as well.

 

I'm trying to figure out why my calculations are off in Firefox. It looks beautiful in both IE and Opera, but I've got that gap and additional width showing up in FF. Has anyone else run into this sort of thing?

 

If you need direct links to the scripts being used:

 

CSS: http://sandbox.guahanweb.com/lightbox/styles.css

JS: http://sandbox.guahanweb.com/lightbox/lightbox.js

 

Thanks in advance for any assistance!

[obsidian]

I don't typically like to bump, but does anyone have a clue here?

[nogray]

The issue is the with the scroll bar in Firefox

 

the bottom scroll bar appread because the div have the same width as the screen (wider than the page). In line 15 I changed it to this

myOverlay.style.width = pageWidth + 'px';

 

The easy way to fix this is the add 15 to the height if it's firefox and the scrolling is more than the page height. This will solve the issue.

[obsidian]

The easy way to fix this is the add 15 to the height if it's firefox and the scrolling is more than the page height. This will solve the issue.

 

Nope... I appreciate the effort, but I've tried that numerous different ways, and I did it again for safe measure when you suggested it. Adding height to the div simply pushes the page down further but still leaves the gap at the bottom of the page. I did figure out the bottom scroll bar appearing, though... I had to get rid of the option for self.scrollTop in one of the functions. This makes it not work in some older browsers, but it fixes the horizontal scroll issue in FF. I'm using the document.documentElement attributes instead, and it gives a more accurate measure.

 

Anyone else want to take a stab at it?

[obsidian]

Well, may not be the best solution, but with a little help from DOM inspector in Firebug, I was able to figure out that in FF, the html element actually holds a different size than the body in my script for some reason. What's more, if I simply added height to the value, I would stretch the page down, but if I use the following script to grab the height of the html element and assign the value to the overlay, it works beautifully:

 

x = document.getElementsByTagName('html');
ele = x[0];
if (pageHeight < ele.offsetHeight) pageHeight = ele.offsetHeight;

 

This assigns the value to the div precisely the same height as the entire html element, not just the body. Maybe not the cleanest solution, but I'm now working in FF, IE and Opera, so I'm pleased.

 

Thanks to nogray for trying to help me out on this one, too.

[nogray]

wow, that's very interesting.

 

Well, as long as you got it to work.

 

Wish you the best.