cancel
Showing results for 
Search instead for 
Did you mean: 

Jumping Header

Penbwlch
Dabbler
Posts: 12
Thanks: 3
Registered: ‎13-04-2007

Jumping Header

Hi, I wonder if anyone can help me cure a small but annoying problem with my website, please?
Basically, I have 6 pages, with buttons providing links to them. I made all six pages from one template so, in my mind, the headers (including the buttons) should be identical. Five of them are; however, with one of them (the home page) the header jumps a couple of millimetres to the right when selected. I have looked and looked but, for the life of me, I just cannot see what causes this jump. Could it perhaps be related to Plusnet? I doubt it but I have run out of other ideas.
My site is here:-
www.hneil.plus.com
Regards
Howard Neil
5 REPLIES 5
pierre_pierre
Grafter
Posts: 19,757
Registered: ‎30-07-2007

Re: Jumping Header

on my PC its not just the first page that move, is it the length of some of the lines below that do it? pags 1 and 4 do - they have the phone number in a long box in view
Penny
Superuser
Superuser
Posts: 980
Thanks: 524
Fixes: 5
Registered: ‎05-04-2007

Re: Jumping Header

Quote from: Penbwlch
with one of them (the home page) the header jumps a couple of millimetres to the right when selected. I have looked and looked but, for the life of me, I just cannot see what causes this jump. Could it perhaps be related to Plusnet? I doubt it but I have run out of other ideas.

Hi Howard,
From looking at the source code I think it's 95% vs 100%.  If you scroll down beyond "Powerpoint Navigation Buttons by Free-Web-Buttons.com v2.0" you get to a "BR" followed by "table style", and it's after that (haven't included chevrons as I don't think they reproduce the same on here).
You might find it easier to read the source code if you put "BR"s on new lines (and new tables, likewise).  I don't use the same style of html as you do (just basic html here, courtesy of Arachnophilia, which is free - legacy non-java version which have found easiest to work with) though the layout I use to write the html has just evolved as the site pages were gradually built  [see source code of any of the HappyChild pages].
Hope the 95% vs 100% proves to be the one that caused the issue you wrote about, anyway Smiley
Best regards,
Penny.
Penny Rollo * Force 9 from 17/02/98 * PlusNet from 2000 onwards
Project HappyChild - free maths worksheets, free French-English
worksheets and 12 other languages
personal site www.pennymidasrollo.plus.com
Cign
Grafter
Posts: 42
Registered: ‎17-08-2007

Re: Jumping Header

Howard
The main cause is that the home page is short compared to the other pages. You will notice that there is no right hand scroll bar on the home page but that there is a scroll bar on all the other pages. As the scroll bar is some 15 pixels wide this is giving the impression that the page is jumping as the page changes.  This is not really a problem but a function of the browser as it changes to accomodate differing page lengths. The easy cure for this is to make sure that all the pages are longer than the average screen height probably over 1200 pixels. Put a large footer on each page possibly!
Edit: This isn't true for all browsers, Firefox will remove the scrollbar when not required, IE will however keep the scrollbar all the time. The following CSS added to a stylesheet or to the template styling will hopefully remove the effect. html {overflow-y: scroll;}
Cheers
John
Penbwlch
Dabbler
Posts: 12
Thanks: 3
Registered: ‎13-04-2007

Re: Jumping Header

Thank you very much to all who replied but my particular thanks go to Journeyman who has found the answer and even given me a way of working round it. I have now made an invisible box below the long telephone number box. That is sufficient on my system to give a scroll bar although I suppose that the problem will still be there for those with big screens.
I had a feeling (perhaps a hope Wink ) that it was something trivial but i never noticed the scroll bar influence, perhaps because the jump seemed to be on the right and the scroll bar is on the left. Anyway, well done John and thank you again.
Regards
Howard Neil
Penny
Superuser
Superuser
Posts: 980
Thanks: 524
Fixes: 5
Registered: ‎05-04-2007

Re: Jumping Header

Quote from: Journeyman
Firefox will remove the scrollbar when not required, IE will however keep the scrollbar all the time

Didn't know that 😕  although, as it happened, when I looked at Howard's site, the header itself didn't move (just the text below it, relative to the header - had assumed it was all intended to be uniform from page to page).  Hence the somewhat 'involved' reply 😕
There were scroll bars on all the pages when I looked at them initially (probably use a different browser resolution, to most people) but I guessed, as soon as I saw your reply, that you'd probably figured out the "actual" problem.
Glad it's sorted, anyway: )
Penny Rollo * Force 9 from 17/02/98 * PlusNet from 2000 onwards
Project HappyChild - free maths worksheets, free French-English
worksheets and 12 other languages
personal site www.pennymidasrollo.plus.com