1

Just finished building a site for my company at http://awesome.redfishbluefishmedia.com, and I'm noticing a strange issue.

ONLY when your browser starts out about 1000px wide, I'm seeing blank space on the right side of the page (this is an issue because iPhone shows it at about that size, and it's quite noticeable on iPhone when loading the home page for the first time, as there's a Fancybox popup which comes up once on the home page). You can scroll farther than you should be able to essentially.

It's a strip down the side, and having searched through the elements, I can't find any that seem to be pushing it over (except possibly the slider on the home page, but this issue is present on other pages as well).

Can anyone help? Can't figure it out, and I feel like this has to be something obvious.

Using the 960.gs grid to standardize my layout.

UPDATE: I added this...

body, html {
     overflow-x: hidden;
}

and that fixed my issue, I think, but I still have no idea why I was seeing that scroll issue; if anyone can enlighten, you'd still be much appreciated.

Jon Schroeder
  • 307
  • 3
  • 8
  • I took out the `overflow-x: hidden` rule and still don't see a white line. Did you observe this behaviour in a desktop browser? I'm using Chrome 19 OSX – MusikAnimal Jul 03 '12 at 04:11
  • Wait I see what you mean, I'll get back to you. Intriguing! – MusikAnimal Jul 03 '12 at 04:13
  • Interesting. That could be what's happening (the clearfix thing), although the posts that I'm seeing say that this may result in excess vertical spacing, rather than excess horizontal spacing (and I'm not seeing any specific elements which flow outside the body or html with the overflow-x rule removed. – Jon Schroeder Jul 03 '12 at 04:23
  • @MusikAnimal, yes, I initially thought it was just iPhone (that's where it's most apparent), but I'm seeing it in all browsers. – Jon Schroeder Jul 03 '12 at 04:23
  • Strangely, on Firefox 13 OSX, with the `overflow-x: hidden` rule, you see a second vertical scrollbar...? I got rid of the rule and it disappeared. [see image](http://imgur.com/WC3zg) – MusikAnimal Jul 03 '12 at 04:30
  • Whoa. You're correct. I have no idea what would cause that (never seen this particular issue before). Still less bad than the initial issue, but it would seem my solution needs some fixing as well. – Jon Schroeder Jul 03 '12 at 04:36
  • Double scrollbars seem to be fixed by adding body, html {height:100%;} – Jon Schroeder Jul 03 '12 at 04:56

1 Answers1

0

Hi now just remove overflow-x: hidden and add min-width in your body and html tag as like this

body, html {
    min-width: 1207px; // add this line 
    overflow-x: hidden; // remove this line 
}
Rohit Azad Malik
  • 31,410
  • 17
  • 69
  • 97