Cannot get rid of FOUC on my website

200 Views Asked by At

I am struggling with a flash of unstyled content on my website. When first visiting it you see the unstyled content before it is actually loaded on to the screen:

You can see for yourself here: http://galaxynode.com

I am not fluent in html so I need some detailed help:

Here is my code:

<html lang="en">
<head>
    <title> Galaxy Node Server Hosting | Premium Minecraft Hosting For $2.99! </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css;">
    <meta name="Author" content="Steve">
    <meta name="Keywords" content="minecraft server hosting, dedicated server     hosting, cheap minecraft server hosting, best minecraft server hosts, minecraft dedicated server hosting, online server hosting, free minecraft server hosting, minecraft server hosts, best minecraft server hosting, dedicated servers hosting, galaxy node">
    <meta name="Description" content="Galaxy Node Server Hosting aims to provide the highest quality Minecraft servers at an extremely low price.
    We have the best customer service of all Minecraft server hosting providers! You will not be disappointed!">
    <body background="http://galaxynode.com/images/background.jpg">
    <link rel="stylesheet" href="galaxynodewebsite_g.css" type="text/css" media="screen,projection,print">  <!--// Document Style //-->
    <link rel="stylesheet" href="index_p.css" type="text/css" media="screen,projection,print">  <!--// Page Style //-->
</head>

<body>
// body content
</body>
</html>

Could someone tell me exactly what I can put in here to stop things from displaying until it is fully loaded? Any fix would be great! I do not know html so please tell me either exactly what I can put in here or something that I can understand without knowing much about html or javascript.

1

There are 1 best solutions below

0
On

Remove <body background="http://galaxynode.com/images/background.jpg"> You have created another <body> tag.

you are essentially loading your stylesheets when the body is being loaded. You see the flash because the css properties haven't been applied. When the extra <body> tag is removed the stylesheets will be part of the <head> and will load first.

if you want to keep that background add a property in your CSS for the body. e.g.

body
{
   background-image: url('http://galaxynode.com/images/background.jpg');
}