Solved

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

Posted on 2010-11-08
10
325 Views
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:
http://epecho.com/gallery.html
 
0
Comment
Question by:saul_roldan
  • 4
  • 3
  • 2
  • +1
10 Comments
 
LVL 18

Expert Comment

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

Expert Comment

by:level9wizard
ID: 34092742
0
 
LVL 16

Expert Comment

by:s8web
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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

0
 

Author Comment

by:saul_roldan
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.
0
 
LVL 16

Expert Comment

by:s8web
ID: 34094567
Thanks, I just learned something :)
0
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
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.
0
 

Author Comment

by:saul_roldan
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.
0
 
LVL 18

Accepted Solution

by:
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

infotext.width(w-40);


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.
0
 

Author Closing Comment

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

Expert Comment

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

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
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 google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

708 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now