offsetWidth is returning incorrect value

Question

Okay so I'm attempting to make a horizontal site but when I try getting the offsetWidth of the navigation, it returns a value far higher than the true width. The design in question can be found here. The CSS for the page is here and the JS here.

Many thanks to anyone who can work this out :)

Answer 1

This is how your page looks like just moment before CSS is applied: http://img571.imageshack.us/img571/1047/shotjt.png . In that moment width of #projects nav is width of client screen.

You have two solutions:

1. specify width of #projects nav in style attribute
2. add some timeout to the init JS function: domready(function() { setTimeout("initPageFunction()", 200); }

Surprisingly, it works good in IE :)

Answer 2

Another solution is set the body margin to 0, usually when no width is set and the body margin is untouched, the render might be off by 16 pixels which accounts for 8 pixels to each side (left and right) of the body tag.

Rodrigo.

Answer 3

It's because the space created by margins are calculated, and there's a right margin for the last article. Here's the fixed script.

domready(function() {

    var projectsContainer = qwery('#projects')[0];
    var projects = qwery('.project');
    var projectsNav = qwery('#projects nav')[0];

    var pMargin = 40;
    var pnW = projectsNav.offsetWidth+cMargin;

    for(p in projects) {
        projects[p].style.marginRight = pMargin+'px';
    }

    projectsContainer.style.width = (projects.length*(projects[0].offsetWidth+pMargin))+pnW+'px';

});