Hi All,

 

I'm new to this forum; very first post - so be gentle with me

 

I recently upgraded our web site at www.mcs-international.org (new look, new sections etc) and was very disappointed to find that some of our (centered) web pages were sliding to the left or right when accessed. An example is clearly visible from our homepage when selecting "News" from our navigation bars (the entire News page can clearly be seen sliding about 20 pixels to the right of the homepage location). This same defect runs in the oposite direction when returning from "News" to the homepage (a few other pages do this kind of thing too). I have had a good look at the the html to try and find the culprit for this but so far no joy. The really annoying thing about this is that NONE of it was apparent when putting the pages together in Dreamweaver 8 (even when previewing in the browser). Everything was fine in testing and only became apparent when I uploaded the new site to our hosting service and browsed the pages in the normal way outside of Dreamweaver. The site is now live with this embarrassing defect...

 

Anyway, trying to fix it is driving me nuts. I'm only a self taught amateur and my health is very poor (very low health/energy resources) so I would be very grateful if one of you guys (or gals) help me out with this.

 

With fingers crossed,

 

Gordon

www.mcs-international.org

look sfine to me - doesn't shift at all. Have you fixed this? If so, it's best to post and say so.

Hi Eskimo,

 

Thanks for having a look.

 

No. The problem is still very much there. Had a friend check it and he gets the page-shift thing too on the same pages as I get it. Happens in both IE7 and Firefox. Strange thing though: I made a desktop shortcut straight to the site and when I use that - even though it is firing up the same IE7 browser - I no longer get the page-shift problem? Fire up the browser in the usual way though - and the problem is still there?

 

It is even there on the most basic of pages: For example between the "Integral Seeds" and "Spirit" nav bar links. And the only difference between those pages is the large graphic. Resizing this graphic makes no difference - but removing it completely removes the problem? Makes no sense to me.

 

The page-shift thing looks terrible and I really need to get to the bottom of this somehow. So any help you can give me Eskimo would be most gratefully appreciated. Strange that you do not see the problem. Are you using a different browser? Like Safari perhaps?

 

Gordon

 

look sfine to me - doesn't shift at all. Have you fixed this? If so, it's best to post and say so.

is it because of the scrollbars?

 

Sometimes ie7 and firefox hide the scrollbar part when there is no need for it (when the page doesn't need to scroll down) and then when it does need to scroll the bar will appear causing centered things to reposition center in the new space...then this will happen again if you go from a scrolling page to a none scrolling page.

 

So check and see if the scrollbar on the right appears and disapears...if it doesn't then I will have a look at the code of your site. As like Eskymo I see no shifting and this is the only reason I can think of that you do and we don't

 

 

EDIT and I looked on both IE7 and Firefox so its not because I am using a different browser

I was about to suggest scrollbars as my site shifts a lot as some pages are quite tall and scrollbars appear and some pages are short and don't need scrollbars.

Hi Guys,

 

Yes. It definitely seems to be the scroll bars. Thanks a million guys for putting me out of my misery with that one. It was turning my grey hair white

 

Still dont like it though. Very distracting and offputting to see the pages slide about like that.

 

Is there any way to instruct the browser(s) to ALWAYS apply scroll bars - whether they are needed or not?

 

Gordon

All you do is give the page a minimum height, so it's always taller than the display area. Thereby always invoking that vertical scrollbar.

Hi Gibson,

 

Thanks for your suggestion. Our site will probably always have pages that are shorter than a full screens worth. Padding pages out with superfluous material just to invoke the vertical scrollbar doesn't really appeal. Surely there must be another way? Possibly a CSS solution of some kind?

 

Gordon

 

All you do is give the page a minimum height, so it's always taller than the display area. Thereby always invoking that vertical scrollbar.

Just add

 

min-height: xxxpx;

 

to the body section of the style sheet replacing xxxpx with a numerical value.

 

Regards

 

Scott

 

default.css

 

Thats your css file, edited.

 

Hope this helps.

Just add

 

min-height: xxxpx;

 

to the body section of the style sheet replacing xxxpx with a numerical value.

 

Regards

 

Scott

 

default.css

 

Thats your css file, edited.

 

Hope this helps.

 

Yeah that's exactly what I meant. Give the page a minimum height in CSS, not necessarily padding it out with anything.

And for IE6 you might need a hack - make a hack for IE6 that has just "height" as it doesn't go for minimum height too well.

I figured thats what you meant Gibson, Just thought Id clarify for Gordon.

 

Good point about the hack too. I never think of those til AFTER I've published lol.

 

 

Scott

Hi Gibson and Scott,

 

Sorry for misunderstanding you Gibson. Exposure to toxic chemicals has me down to my last 2 brain cells - and one of them isn't too bright Just didn't know you could do the min-height thing in CSS - but learning every day.

 

And thanks Scott for editing my CSS file. I uploaded it to my site and tested it out by moving from my home page to the short intro page for our "Top 20" - and it still slid to the right.

 

So, tried to do your hack thing Gibson. Not at all sure how to do what you suggested but tried changing Scott's "min-height 880px;" to just palin "height 800px;" (is that what you meant?). Anyhow, the end result was the same on the page transition test above - it still slid to the right?

 

What am I doing wrong guys?

 

Gordon

So, tried to do your hack thing Gibson. Not at all sure how to do what you suggested but tried changing Scott's "min-height 880px;" to just palin "height 800px;" (is that what you meant?). Anyhow, the end result was the same on the page transition test above - it still slid to the right?

 

Unless I'm wrong - (late at night) it's

 

* html #wrapper

{

height:600(or whatever) px;

}

 

ADD this to your existing css which includes the normal min-height statement. So you have both.

(#wrapper is whatever div you're using - maybe "#content")

 

IE6 will read the *html bit, but the other browsers won't. Ie6's height will expand for the content, the other browsers won't.

Am I the only one who sees this 800px thing as a really flawed attempt of helping that wouldn't always work? what if someone's browser had 900px worth of space, but some of the content spanned 2000px while others only 700px....ohh yeah the scroll bar would appear and disappear still causing the shift. You cannot determine someone's resolution off your own if someone comes with a resolution that is bigger than the min height then you still have the problem . I guess you could set the min-height bigger...but imagine all the empty space some pages would have, so still it isn't really a good idea to use this method.

 

Ok well I'm not here just to have a go at a flawed plan, I'm here with a solution...

 

use this in your css:

 

html { min-height: 100%; margin-bottom:1px; }

 

 

As for an IE6 fix, doesn't IE6 always show a the scrollbar anyway so you don't need that? if I am wrong and it doesn't always show a scrollbar than use this instead:

html { height: 100%; margin-bottom:1px; overflow:auto; }

 

 

your site will now always be one pixel bigger than the browsers height so you will always have the scrollbar on the side, without either having an over kill of too much space...or not enough height.

 

 

 

Hope this helps

Hi Dizi,

 

Thank you very much for your imput. I added your css line to the top of my css sheet (default.css) as follows:

 

html { min-height: 100%; margin-bottom:1px; }

 

body {

margin: 0px;

padding: 0px;

}

 

body, th, td {

font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

color: #6c6e70;

}

 

etc...

 

However, on testing the page transition from homepage to the "Top 20" page (after uploading the new default.css file) I got the same page-sliding problem. Have I perhaps not positioned your css line properly within my default.css file?

 

What I find rather strange about this whole problem is that if I make desktop shortcut to my site - and use that instead of my normal browser desktop shortcut - then there is no page-sliding problem at all - regardless of page length! How come all is fine via a specific site shortcut but not via the standard browser shortcut?

 

Anyway, please advise on what I have to do to make you ccs line work Dizi.

 

Thanks to everyone who has contributed to date for your willingness to get involved and try and help. All very much appreciated.

 

Gordon

Dizi - yeah that would be more sensible method, thinking about it. For sure.

Sorry can't help at the moment Gordon - will post again if I can. Muck around with Dizi's thing, see if you can get it to work.

Dizi - yeah that would be more sensible method, thinking about it. For sure.

Sorry can't help at the moment Gordon - will post again if I can. Muck around with Dizi's thing, see if you can get it to work.

 

Thanks Gibson. Did have a muck about with Dizi's css line in a few diferent positions before I posted my previous post - but had no luck. Will try again now though...

Might be an obvious one.....

 

Have you tried clearing your browsers cache?

 

If not, the page could still be loading with the old css file.

 

i know in FF, you hold CTRL and press F5, i think its the same in IE.

 

Dizi's soliution should work, so clearing the cache may be the solution to the solution lol

 

Scott

Hi Scott,

 

Worth a mention. But clearing the browsers cache made no difference at all. Homepage to "Top 20" still slides left. If I still had hair I'd be pulling it out...

 

Thanks again Scott.

 

Gordon

Hey gordon.

 

Ive just checked the site, and transitions from random pages to other random pages, as well as the home page to the top 20. I am not getting the shifting that you mention.

 

I've tried it at various resolutions and browser sizes, in both FF and IE.

 

This is definately a Hair puller!

 

Will have a think, see if i can come up with anything else.

 

Regards, and best wishes for the new year!

 

Scott

I'm not getting any shift at all so I can't help you, like Scott I have changed my resolution so that some pages fit and others don't I have also checked on my boyfriends PC and laptop and all works fine on them to. Also the fix I have suggested seems to be working for me as on pages that don't need to scroll do scroll down that pixel so the scroll bar is always there even when it doesn't need to be. So I really don't see any logic in why it doesn't shift for me on 3 computers or for scott and still does for you, it is quite baffling

Hi Scott and Dizi,

 

Very strange that neither of you are getting the page-shift thing. The friend I got to test the site (who lives a few hundred miles away) got exactly the same page-shift problems as me. And yet I don't get them either when I use a desktop shortcut straight to the site??? Beats the hell out of me!

 

I am very grateful though for all the help you have all tried to give me with this and hope you all have a great New Year when it comes (in about two and half hours).

 

Lang mae yer lums reek!

 

Gordon