site alignment shifts on load

Hello all

I have created a website that I have an issue with. When each page loads, the page (mainly header) seems to load slightly to the right and then shift over to center.?I have looked through it and can't figure out what is causing it. It is minor but is annoying to me. You can see it at http://auburnillinois.us/

Anyone have any ideas?

Thanks in advance

Chris

site alignment shifts on load

Hi

The 'shift' you are talking about is because your page requires a scroll bar on the side, and the browser only renders this on page display.

PZ

site alignment shifts on load

Thanks...I never thought about the scroll bar. I assume there is no way to keep this from happening?

Thanks Again

Chris

Hi

Sorry, but no. Even limiting the page content will not help, as no one knows the size of the users browser window (I wish we did).

PZ

There is... do a search in this forum itself or on Google...

Basically, the solution is to put this in your CSS:

html {
?overflow-y: scroll;
}

or you can use this:

html, body {

min-height:100.01%;

margin-bottom:1px;

}

Cheers...

JJ

PS: The problem doesn't happen in all browsers, only those that by default don't display a vertical scroll bar. What the fix does is ensure that all browsers think your page content exceeds the height of the window and so open your page/pages with the scroll bar in place.

html {
?overflow-y: scroll;
}

Here is what I added to my external style sheet (the first body tag was already there)

body {
background-color: #009;
}
html, body {
min-height:100.01%;
?margin-bottom:1px;
?}

It doesn't seem to correct the problem. However, I am not that good with CSS....did I do it correctly?

Thanks

Chris

afr43 wrote:

Here is what I added to my external style sheet (the first body tag was already there)

body {
background-color: #009;
}
html, body {
min-height:100.01%;
?margin-bottom:1px;
?}

It doesn't seem to correct the problem. However, I am not that good with CSS....did I do it correctly?

Hi

It will not disappear. The solutions give here, only force the browser to have a scroll bar, not remove the problem, the best solution would be to not use tables for layout, but that is another discussion.

PZ

pziecina wrote:

Hi

It will not disappear. The solutions give here, only force the browser to have a scroll bar, not remove the problem, the best solution would be to not use tables for layout, but that is another discussion.

PZ

You have the rule in the stylesheet correctly written and I don't see any noticeable jumps using Firefox.

So it seems to be fixed to me?:-)

Yes... looks ok to me too... i never saw the first link so didn't realise one could check...

However, i think part of the problem may be a visual illusion. Some links have a drastic change in background colours that seem to cause a jump. I set a screen ruler there to verify and actually there was no change in position or width. Hence, kind of figure it's an illusion. (Firefox %26amp; IE6 ).

Several small suggestions though:

1/ Check size of images... have not checked those but they may be unnecessarily large and slowing page load tme

2/ Change the intense blue background... that makes the page content, which has large chunks of white and takes time to appear, seem to jump.A lighter tone will probably reduce this effect.

Otherwise, as Nadia said, looks like you're good to go. At least on this issue!

Thanks everyone for their input, I really appreciate it.?I have designed some pages before but not to this degree (first site I created with DW). I have some different design ideas I want to try..the site doesn't look quite like I want, but I am getting there....any input on layout or suggestions on overall design are appreciated

Thanks again

Chris

Hi again,

I think the problem has been solved, except in IE 8.0.?I have looked through microsofts releases regarding IE 8 and they indicate it is css compliant. However, you can not apparently force the scrollbar.?Is there another way to do this?

Figured it out...my bad. I forgot to add?this to my css

html { overflow-y:scroll; }

afr43 wrote:

Figured it out...my bad. I forgot to add?this to my css

html { overflow-y:scroll; }

I have found that:

html, body {

min-height:100.01%;

margin-bottom:1px;

}

does not correct it in IE 8.0 (at least mine anyway). However

html { overflow-y:scroll; }

does correct it. Any ideas?

Thanks

afr43 wrote:

I have found that:

html, body {

min-height:100.01%;

margin-bottom:1px;

}

does not correct it in IE 8.0 (at least mine anyway). However

html { overflow-y:scroll; }

does correct it. Any ideas?

Thanks