asked on 10/8/2011

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?

Web Development Adobe Dreamweaver HTML

Last Comment

bogorman

10/12/2011

Gurvinder Pal Singh

10/8/2011

In faithstyles.css
replace line 125 with

overflow-y: auto;
overflow-x: hidden;

bogorman

10/8/2011

ASKER

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;
}

Gurvinder Pal Singh

10/10/2011

try this also

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

ASKER CERTIFIED SOLUTION

Hagay Mandel

10/10/2011

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

bogorman

10/10/2011

ASKER

Hi,
Thanks very much. It works perfectly on Mozilla, IE, Safari, Chrome.
Brian

Gurvinder Pal Singh

10/10/2011

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.

bogorman

10/10/2011

ASKER

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

Gurvinder Pal Singh

10/11/2011

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.

bogorman

10/11/2011

ASKER

Hi gurvinder372.

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

Brian

Gurvinder Pal Singh

10/12/2011

Yes, it means all children of body tag

bogorman

10/12/2011

ASKER

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).