0

When I load a page with Chrome I see html elements on the right until rendering end. After rendering end, elements are correctly at the center of the screen. Take a look :

http://www.socepi.it/

I haven't this problem with IE or firefox... How can I fix it?

Frizz1977
  • 1,121
  • 13
  • 21

1 Answers1

1

I noticed that it's mainly the header that's doing this.

You're doing some old-school stuff like using tables to center the header. '#headerContainerTable' looks like a disaster waiting to happen so maybe that's why you're seeing this rendering.

Personally I'd take "#headerContainer" and center it with css without putting it inside a table. So just remove it from that #headerContainerTable and put it right under #headerPanel then use css horizontally center it (see here: How to horizontally center a <div> in another <div>?)

If you want a quick hack maybe try setting a fixed width to your:

#headerContainerTdLeft
#headerContainerTdRight

just to see what it does..

Community
  • 1
  • 1
Shai UI
  • 50,568
  • 73
  • 204
  • 309
  • That was my first idea, but the problem is not fixed, even if I remove the header totally (the remainder has tableless layout) – Frizz1977 Feb 04 '16 at 10:37
  • you can also go the "crazy" way and then set body { display: hidden } in css and when you've loaded everything you can $('body').show(); in javascript/jquery. – Shai UI Feb 04 '16 at 15:45
  • it works and I'm sufficiently crazy to adopt it :) . I'm curious if there is something else about this behavior or it's a chrome bug. For example, ebay has the same behavior !! – Frizz1977 Feb 04 '16 at 16:18
  • I don't think it's so much a chrome bug.. it's just that it's loading parts of the page and because the page hasn't fully loaded yet it applies the css partially. i'm sure it's something pretty small in your case though.. like, there's probably some tiny mistake somewhere in your css code causing that. – Shai UI Feb 04 '16 at 16:48