El sitio se carga a la derecha, hasta que se termine, luego se centra

Hubo otros 2 hilos en Stackoverflow de personas con este problema. Ninguno de los dos se aplicó a mí. Uno era algo sobre javascript. Inhabilité Javascript en mi browser, todavía hice esto.

El otro fue banners de adsense, y no tengo ninguno en esta página.

¿Puede alguien darme una idea de por qué esto se está cargando a la derecha, y luego centrar cuando la página está completamente cargada?

¡Gracias!

http://www.halotracker.com/Reach/TrueSkillLB.aspx?GameType=Competitive&Playlist=13

Es porque su ancho en las tablas está establecido en 100% con dos de las columnas con * para determinar el relleno. el carácter * le dice a la table que determine el ancho restante y lo llena con la tabla. Entonces, ¿qué ocurre si el browser representa el primer * less el ancho fijo de la columna central? Ni siquiera representa la tercera columna hasta después de que se produce el centrado. Puede ver esto con firebug y detener la carga cuando todavía está alineado a la derecha.

<div class="SiteBody"> <table width="100%"> <tbody> <tr> <td width="*"></td> <td width="1062"></td> <td width="*"></td> </tr> </tbody> </table> </div> 

Diré esto una vez porque probablemente muchos salten sobre esto. No debe usar Tablas para configurar el layout, es una mala práctica y puede darle problemas como los que está viendo. Dicho eso, mi conciencia es clara.

Puede eliminar el primer y tercer TD, eliminar el ancho 100% y establecer el background en el contenedor principal. En mi opinión, esta sería la mejor manera de manejarlo. Establezca el margen en 0, automático y eso le dará todo lo que necesita.

 <div class="SiteBody"> <div class="SiteMiddle">//site content</div> </div> <style> .SiteBody { background: transparent url(image of background) } .SiteMiddle { width:1062px; margin: 0, auto; } </style> 

O Esta es probablemente la mejor manera, ya que pone capas a los divs y le permite establecer los backgrounds para la izquierda y la derecha y aún así establecer un contenido centrado con el ancho correcto

 <div class="SiteBody"> <div class="SiteLeft"> <div class="SiteRight"> <div class="SiteMiddle">//site content</div> </div> </div> </div> <style> .SiteBody { } .SiteLeft { background: transparent url(image of left background) no-repeat left top; } .SiteRight { background: transparent url(image of left background) no-repeat right top; } .SiteMiddle { margin: 0, auto; width: 1062px; } </style> 

No use tablas para el layout.

Causan que la página se renderice más lentamente y puede causar ajustes muy tardíos. Estoy seguro de que has notado esto;)

El layout del sitio no parece muy complejo. Te aconsejaría que lo rehagas sin el uso de tablas como layout (las tablas para las lists de reproducción están bien por supuesto).

Hm, es difícil de decir, pero esto puede deberse a la casilla correcta con "position: absoluta"

Tal vez deberías deshacerte de la tabla centrando tu contenido principal, para no confundir tu browser sobre la position de cada elemento en la página.

Prueba este para HTML:

 <div class="SiteBody"> <!-- remove table stuff here --> <div class="container"> <!-- Your content --> </div> <!-- remove table stuff here --> </div> 

con este CSS:

 .SiteBody {text-align:center;} .container {width:1062px;margin:0 auto;text-align:left;position:relative;} 

Supongo que es Cufon, que reemplaza tus fonts después de cargar el dom. ¿Puedes replace a Cufon y ver si todavía tienes este problema?

Si eso no funciona, ¿puede poner una versión de testing de su página con todas las tags de script eliminadas?

  1. No use TABLAS para layouts. Si usa TABLAS, use celdas de ancho fijo.
  2. Mueva la label de script JS al final del código HTML.
  3. Intenta deshabilitar uno a uno los scripts de JS y ver qué está sucediendo.
  4. Controle su representación de HTML en time real con Firebug.

Después del análisis de su sitio, a continuación se muestran mis comentarios:

  1. El peso total de la página es de 2736.6 Kbytes (que es alto)
  2. El peso de CSSImages es de 986 Kbytes
  3. El peso de los files JS es de 623.2 Kbytes
  4. Si puede usar el almacenamiento en caching en el server para files CSS y JS , la carga de la página se networkingucirá
  5. Como mencionó CBRRacer , debes manejar eso también

Quité todos los javascript, cufon, divs absolutos, etc. del sitio aquí

http://www.halotracker.com/Test/Halo%20%20Reach%20Challenges.htm

Lo único que queda son las tablas. Y he visto las tablas funcionar antes. Siempre he usado tablas y este problema comenzó aleatoriamente. De todos modos, no puedo entenderlo, ninguna de las respuestas que me dieron fue completa.

Disfruta de mis puntos de reputación CBRacer.