Mystery Horizontal Scrolling

catonthecouchproductions
catonthecouchproductions used Ask the Experts™
on
Hey,

I am working on this site: http://goo.gl/7Anqz  - I see this horizontal scroll bar only on product pages and not on any others. I keep looking for overflow:auto, but cant find anything.

Thoughts?

Ryan
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
I am assuming that it might have something to do with this

body.product_bg {
    background: url("images/inner_bg.gif") repeat-x scroll left 0 #EEEEEE;

Open in new window

which is what I see in firebug with firefox.
Try taking the scroll out.
actually looking further I see scroll mentioned in all of these.
body.home_bg {
    background: url("images/home_bg.gif") repeat-x scroll left 0 transparent;
}
body.inner_bg {
    background: url("images/inner_bg.gif") repeat-x scroll left 0 #EEEEEE;
}
body.product_bg {
    background: url("images/inner_bg.gif") repeat-x scroll left 0 #EEEEEE;
}
body.product_bg #wrapper {
    background: url("images/product_bg.gif") no-repeat scroll 0 180px transparent;
}

Open in new window

Hey,

I removed those and still has that scrollbar. Tried on various pages too.
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

You're using a grid framework (960.css) but you have overwritten the grid_4 style of width:220px; with width:296px; in style.css.

Commented:
Hej,
you seem to have a div.grid_10 without correct container in your product page markup (see div#trademark). Maybe that's the reason?
@Chavia just tried tweaking that and didnt work. I thought that was it though. Looking in firebug it extended a ton.

Commented:
But shouldn't you have a container-class declared in/below div#product_page?

Right now product_summary is a grid_8 contained in another grid_8. That seems odd because grid_8 has a predefined width + margin!
I see what you're saying!

I changed that to grid_7 and still scrollbars.

Commented:
I am no grid960 expert, but what about cleaning your code up, like this:

<div id="product_page">
  <div class="top_title grid_7"> </div>
  <div class="clear"></div>
  
  <div class="product_nav_right grid_6"></div>
  <div class="clear"></div>
  
  <div id="product_summary" class="grid_8"></div>
  <div class="clear"></div>    
  
  <div id="benefits" class="grid_4 prod_list"></div>        
  <div id="benefits" class="grid_3 prod_list"></div>  
  <div class="clear"></div>
  
  <div class="entry-content grid_8 alpha omega"></div>  
  <div class="clear"> </div>
  
  <div id="trademark" class="grid_8 alpha omega"></div>
  <div class="clear"></div>
</div>
<div class="grid_8 alpha omega"></div>

Open in new window


I added some div.clear and some .alpha/.omega classes

Besides: I only see scrollbars in IE, not in FF. And removing  .grid_7 had an effect for me, don't know why.

Commented:
Sorry, I forgot .alpha and .omega on div#product_summary.
My earlier comment seems to have gone unnoticed. Setting the width of grid_4 to 296 instead of 220px in your style.css file adds an extra 76px to the width of the whole page, making 960 turn into 1,036 which is too wide for a 1280 x 1024 resolution. When using 1680 x 1050 I don't get the scrollbar, when using 1280 x 1024 I do.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial