catonthecouchproductions
asked on
Mystery Horizontal Scrolling
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
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
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;
}
ASKER
Hey,
I removed those and still has that scrollbar. Tried on various pages too.
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.
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?
you seem to have a div.grid_10 without correct container in your product page markup (see div#trademark). Maybe that's the reason?
ASKER
@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!
Right now product_summary is a grid_8 contained in another grid_8. That seems odd because grid_8 has a predefined width + margin!
ASKER
I see what you're saying!
I changed that to grid_7 and still scrollbars.
I changed that to grid_7 and still scrollbars.
I am no grid960 expert, but what about cleaning your code up, like this:
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.
<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>
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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Open in new window
which is what I see in firebug with firefox.Try taking the scroll out.