Why do I keep getting an element shift after the page loads?

Posted on 2010-11-08
Last Modified: 2012-05-10
I am creating a gallery but when the page loads, the upper left margin in the caption section shifts to the right.
From what I can speculate, I have a reset included from the YUI library followed by my own custom CSS styles.
On load the reset is put in place followed by my CSS which is what is causing the shift.
I am going to use the reset on the rest of my site so I would like to keep it in place if need be I will remove it if given a work around.

Page URL:
Question by:saul_roldan
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
  • +1
LVL 18

Expert Comment

by:Sudaraka Wijesinghe
ID: 34092036
try setting width to 1240px in .galleria-info-text instead of 100%
It's in line 133
LVL 11

Expert Comment

ID: 34092742
LVL 16

Expert Comment

ID: 34092878
It might not have anything to do with it, but not having a doctype can cause some wacky display issues.

Try replacing line 1 with:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI


Author Comment

ID: 34094420
@ s8web I am using an HTML5 doctype.

@ level9wizard I am using CSS3 styles or vender spastic prefixes and I don't think the validator  will keep those up.

@  sudaraka I would like to keep the width of the page in relative values as I would like the page to resize depending on the screen in which the user is viewing it on.
LVL 16

Expert Comment

ID: 34094567
Thanks, I just learned something :)
LVL 18

Expert Comment

by:Sudaraka Wijesinghe
ID: 34094653
Problem is as I see you have the .galleria-info-text DIV set to 100% with initially and some piece of code is setting it to fixed width 1240px (in the 1280px resolution I use, I guess it's leaving 20px space on either side).

So to avoid the "shift", what you need to do is have the similar style initially, I think having 20px margin on either side of .galleria-info-text will do.
Then of cause you need to get rid of that when the code that set the fixed width executes, maybe you can capture that even and set the margin to auto at that point or avoid the fixed with setting at all.

Author Comment

ID: 34102164
@sudaraka I have tried your suggestions and the shift still takes place. I have placed a 40px margin on the  .galleria-info-text DIV set to 100%. the element shift still takes place.
LVL 18

Accepted Solution

Sudaraka Wijesinghe earned 500 total points
ID: 34104257
A JavaScript  on you page is setting the .galleria-info-text element's width to width-40 explicitly after that number slide into place. Therefor at the beginning that DIV has 100% width and after the slide-in it's width is reduced by 40px. This is the reason that content inside this div shift.

The piece of JavaScript I'm talking about is in line 62 of js/galleria.fullscreen.js


You can do one of following things:

1. Remove or comment out the above line and let the div stay at 100% with.
2. Or, If you want to set fixed width dynamically, set to full width instead of width-40. like infotext.width(w);
3. Or, keep this piece of code as it is and add another code to change the 40px margin (I asked you to set before) to auto.

Author Closing Comment

ID: 34111110
Thank you so much. I haven been at this for quite sometime.
LVL 18

Expert Comment

by:Sudaraka Wijesinghe
ID: 34111994
Glad to help. Thanks for the point.

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

617 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question