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

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
 
saul_roldanAsked:
Who is Participating?
 
Sudaraka WijesingheWeb Application ProgrammerCommented:
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
 
Sudaraka WijesingheWeb Application ProgrammerCommented:
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
 
level9wizardCommented:
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
s8webCommented:
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
 
saul_roldanAuthor Commented:
@ 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
 
s8webCommented:
Thanks, I just learned something :)
0
 
Sudaraka WijesingheWeb Application ProgrammerCommented:
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
 
saul_roldanAuthor Commented:
@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
 
saul_roldanAuthor Commented:
Thank you so much. I haven been at this for quite sometime.
0
 
Sudaraka WijesingheWeb Application ProgrammerCommented:
Glad to help. Thanks for the point.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.