Horizontal Scroll Bar Activated When NOT Needed

  • 1
  • Question
  • Updated 7 years ago
  • Answered
On one of my websites (www.royalsnation.org), my horizontal scroll bar is for some reason activated even though everything fits in the window. If you scroll over, it is just blank space. Does anyone know how to fix this?
Photo of Nathan Henderson

Nathan Henderson

  • 157 Posts
  • 3 Reply Likes
  • concerned...

Posted 7 years ago

  • 1
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Hi, Nathan,

What screen resolution are you using? Most of our styles are set up for 1024 x 768 screen resolution. Your site looks fine for me. I'm wondering if your screen settings were changed or if this might be a browser issue? What browser and version are you using?
Photo of Nathan Henderson

Nathan Henderson

  • 157 Posts
  • 3 Reply Likes
1280x800 is what resolution I am using. I am using Firefox 3.6.17. I just tried it on Safari and it didn't happen. I'll try updating my Firefox.
Photo of Nathan Henderson

Nathan Henderson

  • 157 Posts
  • 3 Reply Likes
There are no updates for Firefox, wonder whats going wrong?
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Nathan I see exactly what you mean as your Facebook code is making your page a bit wider than your site's 860px width...

I played around with a bunch of different widths (even zero) but it looks like FB wants it set to 575px wide. Your players image width is 569px wide and when added to the the 575 that FB wants that widens your style's 860px width to 1144 pixels which would give a horizontal scroll bar to anyone with a less than 1200px wide screen setting.

To remedy this and make it so you don't have the horizontal scrollbar:

1) Drag a new two-column widget onto the very top of your page and in the sitebuilder slide the center (blue) divider line to just above Player 34's left shoulder (right side to the viewer)

2) Drag the text widget with the following text "The Official Website of Mason County High School Royals Basketball" into the left side of the new two-column widget.

3) Drag the text widget with the following text "Like the Mason County High School Facebook Page!" into the right side of the new two column widget.

4) Set the left margin setting for the text widget from step three above to 140 (one hundred and forty)

5) Drag the HTML widget with your Facebook code into the right side of the new two column widget under the text from step 3 above.

6) In the HTML editor from step five set the alignment in the lower left corner to "Right alignment"

7) To bring your players image closer to the text above set the upper margin setting of the two-column widget which contains the image of the players, the calendar and the logos to between -100 to -120. (This variable will be according to your liking)

This should correct any horizontal scroll bar issues that you or any of your viewers will have.

Happy site building
Ed

Please share my website with your social networking friends... You can find me with my head in the honey pot here...

Honey Bear Playhomes Tips and Favs in one place... A Honey bear Playhomes Tip ;)
Photo of Nathan Henderson

Nathan Henderson

  • 157 Posts
  • 3 Reply Likes
I did everything that you told me and tried it out and it didn't turn out so good. I am wondering if it is because I have my layout set to "2-Column Left" or not. This is how it turned out.

Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Doh... Two column left would be the cause as the divider line between the left and right sides is locked in place. If you did not have any divider layout and used the tutorial I outlined above it would have worked just fine... ;)

Harder to help people resolve layout issues since that ability has been added. ;)

Seeing as how the right side of the two column layout is locked in at around 300px then any object that is larger than 300px would cause a horizontal scroll bar. Bear in mind that most likely a similar issue will undoubtedly come up again and at least now you know how to remedy it.
Photo of Nathan Henderson

Nathan Henderson

  • 157 Posts
  • 3 Reply Likes
Also Ed,

I really love your site! I was wondering, how do you get pictures (as links) to change orientation just a bit on mouse-over. Like on your site,

http://www.honeybearplayhomes.com/lin...

on the very left side, you have the three pictures as links, and when I mouse-over, they tilt to one direction or another. Just wondering how you do that.

Thanks!
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
That is in fact an imagemap mouseover with both the mousedown and the mouseover images with a transparent background. This allows me to be able to give the effect of movement with only an image swap.

Imagemaps can be quite labor intensive but very soon I will do a tutorial on the steps required to make them easier to understand and implement in a Yola website.

In the meanwhile you can create a similar effect by creating a GIMP transparent PNG image and simply using the rotate tool on the layer (your button or or object) to rotate it a little. Then it is a simple matter of using any mouseover code to flip between the two images. Remember to save the pre-rotate image and then save the after-rotate image to get your two images needed for the mouseover. This way when your initial image is moused over it will swap to the tilted one.
Photo of Nathan Henderson

Nathan Henderson

  • 157 Posts
  • 3 Reply Likes
Alright. I know how to do the imaging things (I use Photshop). But do you know the mouse-over code. That is all I needed. Thanks!
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Bear in mind that when you begin adding multiple mouseovers on your page you must name them accordingly so that they do not cancel out each other. Most generators name them the same as they don't know that you have many.
Photo of Nathan Henderson

Nathan Henderson

  • 157 Posts
  • 3 Reply Likes
I fixed it! Instead of using XFBML from Facebook, I used iFrame and I played around with the width and height to make it fit nice, I also took off the faces (tiny pictures) because we did not need them. Well anyways, it works now. Thanks!!!
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Glad to hear it... At least you knew who the culprit was causing you all the grief... ;)