Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2010-11-08
10
Medium Priority
?
335 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
Industry Leaders: 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!

 

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
 
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 2000 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

824 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