Member Avatar for JimiH

Hello, I recently constructed my first website for a friend using
Sharepoint designer. Everything seemed to go well except
when I click a link then click home again the webpage shifts position.

Here is the site

http://www.surveillanceservices.org/

Click "About" then "Home" repeatedly to see the problem.

Anyone know what is causing this?

Thanks

Geoff

  • 6 Contributors
  • 5 Replies
  • 100 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by bunny12

Dani AI

Generated

Good catch by and , and the long‑term idea from is sound. The behavior you see is the browser restoring a previous scroll/offset while the page layout changes between navigations — usually because something on one page is wider than the main container so the horizontal scrollbar appears/disappears. Use the checks below to confirm and fix without guessing.

Quick diagnostics

  • Reproduce the jump, then open DevTools (F12). In the Elements/Computed panel watch the page width and look for any element whose computed width exceeds the content wrapper. Temporarily delete a suspected inline width in DevTools and retry navigation to see if the jump stops.
  • Toggle the page overflow (in DevTools set overflow-x on the html/body) to see whether scrollbar presence is the trigger. (Browsers also attempt to restore scroll position; see the MDN notes on scroll restoration: Scroll restoration.)

Safe fixes and cautions

  • If DevTools shows inline width attributes are the culprit, remove or replace them in the source/template rather than repeatedly patching pages. If an editor re-writes pages, change the template output so the widths are not injected.
  • Prefer constraining the layout with a single container rule using max-width and centered margins rather than fixed hard widths; this prevents overflow across different viewports. Avoid overflow-x: hidden as a permanent fix because it can hide real content.
  • If you cannot change the HTML immediately, a temporary override may be possible, but inline styles have high specificity — review CSS specificity before relying on external rules (Specificity).

If the jump is still unclear after these tests, capture a short screengrab or list the specific elements that remain wider than the wrapper so fixes can be targeted.

Recommended Answers

All 5 Replies

Member Avatar for pritaeas

In the source of the homepage you have P tags with a width larger than 900px. The table is only 900px wide, so I think you should remove the width on the P tag to solve this.

Edited by pritaeas because: n/a
Member Avatar for macneato

pritaeas is absolutely correct. You have inline styles on most of your p tags, which are above 900px.

You could try something like this (untested)

.p[style]{
width:800px;
}

Probably won't work in ie6 though.
Edited by macneato because: n/a
Member Avatar for smilingrose

Thanks for sharing the useful information...

Member Avatar for drjohn

Or you should do it the way everyone else does, create a wrapper div around the content and give the div the width. Then every paragraph inside that div will be constrained to that width. It's not normal to give the p tag a wdith.

Edited by drjohn because: n/a
Member Avatar for bunny12

For the last few years, the site was maintained using Microsoft FrontPage 2003®. When it was decided to completely revise the site in 2007, one of the prime motivators was to move to being fully standards-based (XHTML and CSS). But the reasons for updating the site were not only technical.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.