Link to home
Start Free TrialLog in
Avatar of catonthecouchproductions
catonthecouchproductionsFlag for United States of America

asked on

Mystery Horizontal Scrolling


I am working on this site:  - 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.


Avatar of haloexpertsexchange
Flag of United States of America image

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

Avatar of catonthecouchproductions



I removed those and still has that scrollbar. Tried on various pages too.
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.
Avatar of Chavia

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.
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.
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 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.
Sorry, I forgot .alpha and .omega on div#product_summary.
Avatar of Vampireofdarkness
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial