Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Graham Davidson
Graham Davidson
Courses Plus Student 14,966 Points

Stange Loading

Can someone shed a little light on this for me please. I am getting a page loading in quite a strange fashion. Basically the Facebook section in the header loads in an incorrect position and then repositions correctly. This has just happened in Chrome on PC and Mac and I am not sure why.

http://plusonetesting.co.uk/pony/reservations.php

Thanks

G

4 Answers

James Barnett
James Barnett
39,199 Points

2 guesses:

  • The page has W3C validation errors
  • The page has a TTF file that 404'ed

Both of those things can cause weird rendering behavior

You've also got another ttf font file that takes 1sec to load and a background image that took 0.5sec to load. The rest of the page only takes 1sec more to load for a total page load time of 2.5sec.

Check out the details

Joseph Cahill
PLUS
Joseph Cahill
Courses Plus Student 4,739 Points
Joseph Cahill
Joseph Cahill
Courses Plus Student 4,739 Points

Graham,

This does this because the browser first loads the normalize.css which sets all html fonts as sans-serif. Then main.css is loaded and it requests the webfont (over the rainbow) that you have specified for the Logo and renders it.

Once rendered it is much "w i d e r" than the original and pushes the Facebook image over a bit.

Keep playing with your DIV widths and floats. You should be able to figure out a way to make the movement less noticeable.

Try commenting out the webfont to see the width difference and positioning of the Facebook div.

Graham Davidson
PLUS
Graham Davidson
Courses Plus Student 14,966 Points
Graham Davidson
Graham Davidson
Courses Plus Student 14,966 Points

Hi thanks for that Joseph will check it all out.

G

Graham Davidson
PLUS
Graham Davidson
Courses Plus Student 14,966 Points
Graham Davidson
Graham Davidson
Courses Plus Student 14,966 Points

Also thanks James ps thats a wicked tool thanks very much.

G