Copy link to clipboard
Copied
I have 3 websites all created the same way from my own templates (different templates for each site) but all have the same problem. I am using Dreamweaver CS5. My latest site is berksandmarlboroughdownsvillages.co.uk which has a page for each village in the Berkshire and Marlborough Downs. The site uses two templates, one for all the "village" pages and the other for all the other pages (Home, List of villages, About the downs, etc.). When moving from one page to another there is a slight but noticeable "jump" to the right and back again, even if the pages were created from the same template.
I have spent hours trying to work out why this is as I have never seen this fault on other sites and obviously it shouldn't happen. I have checked through the code, tried things like standardising page lengths so they either all have or do not have a vertical scroll bar, centralising the site, but nothing works.
If anyone has the answer please let me know.
Copy link to clipboard
Copied
Are the "jumping" pages longer than the browser window?
The addition of the scrollbar on the right of the browser window will create a "jump" effect as everything moves over 20 pixels to make room for it. It's not something anyone but those of use with varying levels of Designer OCD will notice.
Copy link to clipboard
Copied
Jon
Some of the "jumping" pages are longer than the browser window and others are not. The page length makes no difference. And whether there is a scroll bar or not makes no difference. The content jumps a few pixels to the right and then jumps back again.
The style sheet is incorporated in the Head of the template so would it not be loaded first?
Copy link to clipboard
Copied
Try getting rid of the StatCounter and see if that solves the problem.
Copy link to clipboard
Copied
Actually, nevermind that, that looks very much to me like you have a case of FOUC...
Flash Of Unstyled Content
Basically, parts of your page are loading before they're 100% styled by your css. It might take a little doing, depending on how your pages are created, but there are many articles on eliminating FOUC (and the more maddening version without the O) online that can help you eliminate that oddness.
Copy link to clipboard
Copied
I'm not seeing any jumping between pages but the code contains errors that could effect page rendering in some devices.
Google's Mobile Friendly report shows some page loading issues.
Mobile-Friendly Test - Google Search Console
Copy link to clipboard
Copied
https://forums.adobe.com/people/Nancy+OShea wrote
I'm not seeing any jumping between pages
I initially observed a slight jumping as the OP suggested but then nothing as I visted more pages and returned to the pages which initially exhibited the jumping. I don't know why. My first thought as to what would cause an issue like that would be the allocation of the browser scroll bar on longer pages, but that doesnt seem to be the case.
Copy link to clipboard
Copied
I don't know for sure but think the cycling images (top right) might be part of the problem. Replacing with a single static image might be worth testing.
Copy link to clipboard
Copied
https://forums.adobe.com/people/Nancy+OShea wrote
I don't know for sure but think the cycling images (top right) might be part of the problem. Replacing with a single static image might be worth testing.
Don't know, its very abitrary when it happens, so its difficult to pin down the source of the issue as its seems to disapear and then reoccur.
Copy link to clipboard
Copied
Thanks for this suggestion. I had previously tried removing the cycling images but that made no difference. In any case I have exactly the same problem on my other websites where there are no cycling images. oxfordshirevillages.co.uk for example.
Copy link to clipboard
Copied
We're losing sight of the fact that not all pages "jump" whereas all have the cycling images.
Copy link to clipboard
Copied
Nancy I had already looked at this but I'm afraid I don't understand the errors. What is the significance of the red > in each case?
Regarding the errors in line 224 for example what is the significance of the reference to "type" and "alt" attributes?
You can tell from this that I am a novice!
Regarding your suggestion about the cycling images I have tried replacing with a single image and as far as I can remember this made no difference. That said, I do want the cycling effect rather than a single image.
Copy link to clipboard
Copied
Don't worry about "type" attribute. In HTML5 you don't need it.
Every image should have an alt="description" for accessibility reasons. If the image doesn't load, the alt text appears in its place. It's also read aloud by screen readers to visually impaired users.
Orphaned tags are a bigger problem. Every tag should have a matching closing tag. It it doesn't, some browsers will have trouble displaying the page correctly.
Copy link to clipboard
Copied
https://forums.adobe.com/people/Nancy+OShea wrote
Every image should have an alt="description" for accessibility reasons. If the image doesn't load, the alt text appears in its place. It's also read aloud by screen readers to visually impaired users.
And should also have the width attribute populated to ensure that the space is reserved while loading.
Copy link to clipboard
Copied
Thanks Ben. I'll add the width to all the cycling images too. do you think this is likely to effect the original problem? I would have thought not.
Copy link to clipboard
Copied
Ben we're losing sight of the fact that not all pages "jump" whereas all have the cycling images.
Copy link to clipboard
Copied
Try adding the following CSS
html {
overflow-y: scroll;
}
Copy link to clipboard
Copied
This is a web forum, not private e-mail. You do not need to repeat your comments to each person.
Dissable all CSS styles and test your site for page jumping.
Copy link to clipboard
Copied
Conclusion to this one is the code is complete and utter junk. The browser is trying to dechiper what the hell it needs to do with all the width declarations (probably none add up to the correct width) so the browser is re-adjusting on the fly, not to mention all the invalid heights, empty and redundant tags. I'm actually surprised it performs as well as it does. This is only fit for the bin.
Sorry to be the provider of this news but someone has to be truthful.
Copy link to clipboard
Copied
osgood_ wrote
Sorry to be the provider of this news but someone has to be truthful.
I agree the current site is showing its age. ThickBox ended in 2007. That makes the site at least 12 years out of date. No matter how you look at it, it's overdue for a re-build with modern code and responsive layouts. The current site is not practical or sustainable.
Copy link to clipboard
Copied
Thanks Nancy. i'll try adding alt details to the cycling images. But do you really think this will affect the original problem?
I can't see where there are orphaned tags. Is that the reason for the red > ? Which tag is orphaned in line 242 for example.