Scroll Bars showing up in content window?

Permalink
I made a couple basic edits today and after publishing, I noticed vertical scroll bars showing up inside the content window/frame on certain pages. The scroll bars are on not on all pages of the site, but on the page I edited as well as some others. The edits were inserting links for rollover images.

I quickly went back to previous versions on the pages and deleted the newer versions but that did not take care of the problem.

Can someone help me out? I am not a designer. Just a guy trying to update his website.

the website is hophale.com

 
AcruxFarmer replied on at Permalink Reply
AcruxFarmer
What pages and images are showing scroll bar? Most likely its something in the style sheets. I can take a closer look, but I could not find the scrolling content on my own.

BTW fun Bouncy Houses :)
HopHale replied on at Permalink Reply 1 Attachment
Thanks for taking the time to help!
When I started replying to your post, I opened multiple pages in different tabs and was copying/pasting all the urls of pages that have the scroll bar error, when I went back and noticed that after a few minutes, the scroll bar would disappear.

I went back and tried to recreate this, and basically it seems that sometimes the scroll bar will disappear after a little while and sometimes it wont. Also, load time has increased dramatically.

*It almost always initially shows on at least these pages:
hophale.com
hophale.com/bounce-house-rentals-oahu/

*Does not seem to ever show on these:
hophale.com/bounce-house-rentals-oahu/water-slides-rentals/
hophale.com/special-treats/


I attached a screen shot showing the scroll bar error just to prove I'm not crazy. Look on the right side just inside the white border around the content area.
JohntheFish replied on at Permalink Reply
JohntheFish
What you have is a fixed height area (DIV), probably somewhere in your theme, with content that is, in some cases, too big for it. So the default browser behaviour is to add a scrollbar.

Some options:
- Change the content to fit the DIV height
- Change the DIV height to allow for the larger content
- Remove height restrictions on the DIV so it grows as necessary
- Change the css to hide the overflow (ie chop off whatever overflows)
- Change the css to always show scroll bars (ie, show them even when no scrolling is necessary)
- Change the css to style the scroll bars to be more discrete
- Find a jquery plugin that swaps to a more discrete way of showing the surplus content.
HopHale replied on at Permalink Reply
Thanks for the insight. That is definitely above my skill level so I will have to get in touch with the designer.

One more question...since this only started today, was it something I did that created this problem? Thinking back on the edits I made today, they were pretty minor and did not add any length to the content.
JohntheFish replied on at Permalink Reply
JohntheFish
It may be that some styling has been changed in the past, but only becomes effective when you save an edit. In that case even simply edit/save with no changes could cause the issue.
AcruxFarmer replied on at Permalink Reply
AcruxFarmer
Hello HopHale

If you have access to your Main.CSS style sheet,

change line #80 to = overflow: hidden;
change line #85 to = overflow: hidden;

So the overflow tag tells the web browsers what to do when content "Overflows" or is larger then its holding container. When the Overflow tag is set to "auto" browsers automatically add in a scroll bar when the content is larger then its container.

In your case there is some styling going on causing the total dimensions of the content to became larger then its container, and presto you have a scroll bar. Most likely its an image borders or padding that is increasing the overall dimensions of the content. So by changing the Overflow value from "auto" to "hidden" the browser will hide the extra content instead of displaying a scroll bar

:) Joe Graham