When Panel is Opened, It Jumps to the Left

[mattyd]

There is an issue with a page I am developing that I just noticed.

Please take a look at the page: http://redlinedown.com/index700.html#

On the top, black panel bar, notice "Log In | Register" in blue > Select this link and watch as the bar opens and drops down.

When it completes dropping down to display the registration area it immediately jumps (I would approximate) 1-3 pixels to the left.

Would anyone know why this behavior may exist? Any hints or pointers would be greatly appreciated.

Thank you,
Matthew

[showman13]

It appears to be jumping to the left to accomodate the room necessary for the vertical scroll bar on the right side of the page

[mattyd]

Showman13:

Yes, I think that makes sense but I am not happy with that outcome or appearance of that.

Is there any way that you know of to modify this? I suppose I will need the scroll bar for the finished page, but I do not want it to jump like that - It needs to glide down smooth.

I imagine I can somehow shift the entire bar and registration contents over (left) to accompany the bar so it does not jump left, allowing space for the vertical scroll-bar by default. Does that make sense?

Thanks,
Matthew

[showman13]

I'm sure there is someone much smarter than me in here that could give you a clear answer to that.

if the page you are loading didn't go edge to edge on the monitor, it wouldn't need to make room for the scroll bar, so setting your page width may help. Other than that, I really don't have any suggestions.

Not very helpful I know, but it is all I've got at the moment.

[gentlemedia]

It would be helpfull to mention in which browser you see this, because in Chrome on the Mac it looks okay.

[JorgeM]

What i have gotten used to doing for sites that may have some pages that will fill more than just the screen (vertically) is to just show the scroll bar for all pages. This way, no matter what page you visit, you will not have that "bumping" to the left effect.

If you add this style to your <html/> element, it should take care of hte problem.

html { overflow-y: scroll }

It Jumps to the Left

And then a step to the right.
With your hand on your hips...

Sorry was it just me? From the title, I was expecting something with Frank N. Furter

Apologies Matty.

[mattyd]

JorgeM:

I shall try that suggestion - I pray it works because this little issue driving me crazy.

Thank you,
Matthew

[mattyd]

JorgeM:

When you say my "html element" are you referring to something in CSS or directly in my HTML mark-up?

Thanks,
M

[JorgeM]

Yes your CSS. Apply styling of overflow-y to the HTML selector as shown above.

[mattyd]

I cannot get this to work properly - I put .html { overflow-y: scroll } in my css file and <div id = "html"> in my index page.

I am still struggling to understand CSS completely - I experiment and some of the results are odd, unexpected.

I do not like hacking at my mark-up/code but sometimes that is the only thing that works and in turn teaches me.

Am I doing something wrong with this particular example?

[JorgeM]

Matthew,

sorry for not being more specific. there is no need to create a div, nor are you creating a class called "html". The purpose here is to apply the overflow-y style of scroll to the html element. You can do that using 3 options... inline style, internal style, or external style. Since you already have an external style sheet & we want this to apply to all pages, just open up your file called style.css. On line 14, just add this...

html { overflow-y: scroll }

That's it. I already tested it on live site and it works as expected. I also found this while browsing your page using the browser's dev tools..

you have some other resources not loading (see items in red)...

[mattyd]

JorgeM,

Thank you for this explanation and also about other resources not loading. I will look into all of this in the morning and post the results here.

Thanks,
Matthew

[mattyd]

JorgeM,

Hi. I implemented your suggestion to fix the slide-down problem - It worked perfectly. Thank you so much for your kind assistance!

Matthew

[showman13]

See, like I said... someone much smarter than me... LOL

Great solution that I had no clue about, but will add it to my arsenol...

Thanks JorgeM