[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 271
  • Last Modified:

Scrolling and Links do not work properly

On our website:

http://www.faith.org.uk

there are two problems:

1. Two vertical scrollbars - one on the webpage itself and one on the window in IE, Chrome and Firefox (Safari only has the window one). It would be nice to just have the one on the webpage.

2. In the link to the article about Archbishop Fisichella (third row, right column) when the page displays it is scrolled up. The link is to a Named Anchor on the page.

Can anyone tell me how to correct these problems?
0
bogorman
Asked:
bogorman
  • 5
  • 5
1 Solution
 
Gurvinder Pal SinghCommented:
In faithstyles.css
replace line 125 with

overflow-y: auto;
overflow-x: hidden;
0
 
bogormanAuthor Commented:
Hi,
Thanks. Have tried your suggestion but it does not seem to work.   Just to check I have not modified the wrong line. My corrected css contains:

#Layer3 {
      position:absolute;
      height:505px;
      z-index:500;
      left: 149px;
      top: 125px;
      background-color: #000000;
      border: 1px none #000000;
      overflow-y: auto;
      overflow-x: hidden;
      font-size: 12px;
      color: #FFFFFF;
      text-align: left;
      padding-right: 10px;
      padding-left: 5px;
      width: 544px;
}
0
 
Gurvinder Pal SinghCommented:
try this also

body > * {
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: scroll;
}
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
HagayMandelCommented:
Layer 14:
height 1750px change to 505px
0
 
bogormanAuthor Commented:
Hi,
Thanks very much. It works perfectly on Mozilla, IE, Safari, Chrome.
Brian
0
 
Gurvinder Pal SinghCommented:
I guess you should have splitted the points since i suggested you to make overflow-x:hidden, which you are still using in the working code.

0
 
bogormanAuthor Commented:
Hi gurvinder372,
I find that the change of height setting in layer14 worked for me.   Does it work because I ALSO used your overflow-x:hidden setting?
If so, should I change the points allocation?
Brian
0
 
Gurvinder Pal SinghCommented:
Please check if it work without it, otherwise anyone looking at this solution may not be benefited much. I am not bothered about the points this time, please take care of this in future. You can mark my answer as useful, by clicking 'Yes' button on the top-right side of the comment.
0
 
bogormanAuthor Commented:
Hi gurvinder372.

is body > * { a CSS statement?   Not familiar with it, but I am only a beginner!

Brian
0
 
Gurvinder Pal SinghCommented:
Yes, it means all children of body tag
0
 
bogormanAuthor Commented:
How can I combine these two body statements:

body {background-color: #000000;
      text-align: center;
      font-family: Arial, Helvetica, sans-serif;}

body >*{overflow: -moz.scrollbars-vertical;
        overflow-x: hidden;
            overflow-y: scroll;
            }

I assume the second means that the body and all its children (layers) are affected by the overflow statements. The first defines the background color, text alignment and font family for the body.

If I use both statements, the webpage height becomes very small (about half the height of the upper space image).
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now