10

I'm doing some work for http://digitaleditor.com/ and I've run into something a tad confusing.

The web page has a horizontal scroll bar at the bottom, but I've been unable to figure out why. Using Google Chrome's developer's tools I've found that there are only 3 items on the entire page that exceed 960 pixels wide. The first two are html and body, the second is #hpages, however the second is only 970 pixels wide (html and body are each 1263 pixels wide). Furthermore there's a very obvious CSS rule stretching #hpages to 970 pixels:

#hpages ul {   width:970px; float:right; }

I can find no such rule stretching the html or body elements. I tried running the following script to see if there were any elements I was simply overlooking that might be stretching the page:

javascript:widest=null;$("body *").each(function(){if(widest==null)widest=this;else if($(this).width()>$(widest).width())widest=this;});alert(widest.id);

This returned #hpages, meaning that no item is over 970 pixels wide in the body (even though the body is stretched to 1263 pixels).

There are no CSS rules affecting the width of the body element or the width of the html element.

I'm honestly just at a loss as to what is stretching the page, and I don't know how to figure out. At this point my last resort is systematically removing items from the page until it's resolved. I was wondering if anyone knew a better option.

stevendesu
  • 15,753
  • 22
  • 105
  • 182
  • Is the homepage of the site you link to an example? Because it's currently not scrolling horizontally for me, with a viewport of 1000px, on Chrome/Mac. – millimoose Oct 31 '11 at 23:06
  • Don't get any horizontal scrollbar on Chrome (latest version). – deviousdodo Oct 31 '11 at 23:06
  • I'm in Chrome 14.0.835.202, and the owner of the site uses FireFox 7.0.1 and we both see the horizontal scrollbar. I have my browser maximized an my resolution is 1280x1024. Testing in Internet Explorer 9 and Safari 5 also gave me the horizontal scroll bar. Could it be a Windows thing if it isn't showing up on Mac? – stevendesu Oct 31 '11 at 23:16
  • Are there any other CSS rules affecting #hpages? Any padding/margins? – Furbeenator Oct 31 '11 at 23:17
  • @Furbeenator: Absolutely nothing. Took a look and it's 0 margin, 0 padding, 0 border. – stevendesu Oct 31 '11 at 23:21

3 Answers3

5

It's the width on the iframe in .wrapper>#page>#content>#sidebar.rightSidebar.left>center>div>#fb-root>div>div>iframe#f1c73bf2defcb8

It has an inline style of width: 575px; which is overflowing. Either fix the width or add overflow: hidden; to this div <div style="position: absolute; top: -10000px; height: 0px; width: 0px;">

Steve Robbins
  • 13,672
  • 12
  • 76
  • 124
  • I have absolutely no idea how you figured that out, but it seems legit. I'll change it and see what happens – stevendesu Oct 31 '11 at 23:23
  • The iframe is created by a javascript stored on Facebook's servers, although I added `overflow:hidden` to the containing `div` object which I do have control over and the issue still wasn't resolved. EDIT - although removing the Facebook Like button entirely did fix the scrolling issue, so you have pinpointed the proper element. All I need now is a solution. And preferably an understanding of how you figured it out. – stevendesu Oct 31 '11 at 23:27
  • @steven_desu not the containing div, but the one containing that, with the absolute positioning on it. If that doesn't work you could give it `left: -575px;` and that should have the same effect. I figured it out using Opera's inspect element. – Steve Robbins Oct 31 '11 at 23:33
0

In the page you have a link to:

<link rel="stylesheet" href="http://digitaleditor.com/wp-content/themes/couponpress/template_couponpress/styles.css" type="text/css" media="screen" />

In that page there is:

/* ===================== _HEADER STYLES ======================== */ 
#hpages ul {   width:970px; float:right; }
#hpages ul li { float: right; padding-right: 10px; margin-right: 10px; border-right: 1px solid #333; }

Not sure, but maybe having the margin-right on the li may be causing them to overflow. You may want to overwrite this style with CSS on your page. Not sure if you have access to do so, but that may be an option.

Furbeenator
  • 8,106
  • 4
  • 46
  • 54
  • That's a good catch, but the margin-right applies to the `li` elements, which only have a width of about 60-100 pixels each. And there are only two of them. Those `li` elements are far from overflowing the page. – stevendesu Oct 31 '11 at 23:30
  • But if they are floating right and have a margin, they may overflow the right border of their parent element. – Furbeenator Oct 31 '11 at 23:31
-1

Remove position:relative; from .wrapper

Maverick
  • 3,039
  • 6
  • 26
  • 35
  • Removing position:relative; is impossible as there are many absolutely positioned items on the page dependent on it. – stevendesu Oct 31 '11 at 23:22