Sticky footer shifts divs

[eelucid8]

Hi there,
I'm using a sticky-footer technique at:
www.roadstardesign.com/dojo

Now, it works fine as long as the page is fully vertically expanded and there is no scroll bar present. BUT... when there is a scroll, the header and the footer both shift one pixel to the left, leaving a tall vertical white line to the right of the header, and a shorter vertical white line to the right of the footer. It's so small the client probably wouldn't notice, but personally, I can't deal with it this way. The style sheet in question is located at:
roadstardesign.com/dojo/templates/heionkihakutemplate/css/template.css

I've spent hours trying all the permutations of changing the height of #nudge, changing the negative margin-top of #footer, and the padding-bottom of #container. Nothing seems to solve this problem.

Any thoughts from the peanut gallery? Thanks in advance,
Bill

 

[PixelPusher]

The problem lies with your wrapper div (#wrap). It really doesn't work as a traditional wrapper div at all. The background image for that div is the cause of the white line your are seeing on right side of the site. My suggestion to you is to make the wrapper 970px wide instead of 1400+ and adjust the size of the image. Keep in mind, if your image is just a red block of color designed to mockup a column on the right and white on the left, simply make a transparent red block image and align it to the left, then set the background color to white. There is no point loading white image data when you can achieve it programmatically through css.

Example

background:white url(../images/yourColorBlock.png) left top repeat-y;

 

[eelucid8]

Thanks John. Just saw this post now, actually! I appreciate your input.