0

I have a very strange bug that involves extra spacing on the body or html element. This spacing does not appear in a normal browser's viewable area, it's only seen if you do a mouse scroll to the right side of the screen.

Please take a look at the staging site I've setup to see exactly what I mean. http://silo.radishlab.com

I'm going to assume this is some css bug I've created for myself, but I haven't been able to track down the source.

Edward Wisniewski
  • 21
  • 3
  • Maybe this could help? http://stackoverflow.com/questions/4617872/white-space-showing-up-on-right-side-of-page-when-background-image-should-extend – Joel Worsham Oct 30 '13 at 19:36
  • @Tip_Top a fiddle is not needed, nor helpful being that he has linked his entire site where the problem exists. – Joel Worsham Oct 30 '13 at 19:36
  • @Tip_Top I see the merit in that, but creating a fiddle for this problem isn't feasible, being that it "was" unknown where the problem exists. Just my opinion. – Joel Worsham Oct 30 '13 at 19:42

2 Answers2

1

In your styles you have 40px worth of left and right padding on .footer-container footer which pushes it out beyond the 100% limit.

You can get around this by using something like box-sizing: border-box; (which requires vendor prefixing)

Or by removing the padding and using different methods to get that space without pushing out the container width.

Blake Mann
  • 5,440
  • 23
  • 37
  • That's part of the issue, the other part is the next arrow on the slider. The extra space was being created when not hovering the slider and the arrow was pushed to the right. After removing the "right:-50px" from ".flex-direction-nav .flex-next" the problem went away. – Joel Worsham Oct 30 '13 at 19:48
  • 1
    Ah, my mistake, I had disabled the arrow first and saw no change so when I disabled the padding on the footer I forgot about the arrow. Thanks for pointing it out! – Blake Mann Oct 30 '13 at 19:49
1

You have 2 culprits.

  1. Your <footer id="colophon"> has width: 100% and left padding of 61px. Remove the left padding and instead put that padding in the parent element <div class="footer-container">.

  2. Set <article id="slider"> to have overflow:hidden.

jonsuh
  • 2,875
  • 1
  • 18
  • 23