Loading Screen Issues

Lately I’ve been creating a loading screen as my first script.
All was going well in the web browser until I tested it on an actually server.
It looks like this on an actual website:

It looks like this on GMod:

I’d really appreciate the support.


<!DOCTYPE html>
<html>
<head>

<!-- your webpage info goes here -->

    <title>Loading...</title>
	
	<meta name="Kezzy" content="Kezzy" />
	<meta name="Kezzy Inc. Loading Screen | Volume I" content="" />

<!-- you should always add your stylesheet (css) in the head tag so that it starts loading before the page html is being displayed -->	
	<link rel="stylesheet" href="css/style.css" type="text/css" />
	 <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel='stylesheet' type='text/css'>
	<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel='stylesheet' type='text/css'>
</head>
<body>
<!-- webpage content goes here in the body -->
<div id="container">
<div class="myElement">	
<div id="topbar"><h1>Kezzy Inc. Loading Screen | Volume I</h1>
<div id="rcorners2">
</div>
</div>
<br>


<!-- ABOUT / LEFT BOX -->
  <div id="left"><h1>About</h1>
  <p>My name is Kezzy and this is my first script on scriptfodder. I will be updating this script consistently.
  Making sure it is always up to date.
  <h3>Support</h3>
  <p>When purchasing from Kezzy Inc. you are guarenteed daily and instant support.
  I am active daily and will be answering all tickets instantly, providing you the best service possible.</p>
  <h3>Installation and Customation</h3>
  <p> The installation guide will be stored in the readme.txt available for the customers.
  Everything you see is fully customizable and you have full support from me to do so. </p>
  </div>
  
  
  
  
  <!-- RULES / RIGHT BOX -->
  <div id="right"><h1>Rules</h1>
   <p> 
     <li>Do not RDM.</li>
     <li>Do not RDA.</li>
	 <li>Do not NLR.</li>
     <li>Respect all the admins.</li>
     <li>No racism.</li>
	 <li>No bullying.</li>
	 <li> Do not mic spam.</li>
	 <h3> Roleplay Rules</h3>
	 <li> Must serious roleplay.</li>
	 <li> Must type OOC when speaking out of character.</li>
	 <li> Must play your role.</li>
	 <li> Must understand the playerkill system.</li>
	 <li> Must be willing to learn new roles.</li>
   </p>
	</div>
<!-- PLAYER / MIDDLE BOX 1 -->
  <div id="center"><h1>Player</h1>

  </div>
 
 <!-- MAP / MIDDLE BOX 2 -->
  <div id="center"><h1>Map</h1>

  </div>

  </div>
<!-- Loading Bar / Customize colours in style.css -->
  <center>
<div id="timedMsgDiv"></div>
    <script type="text/javascript">
    function timedMsg() {
        currMsg++;
        document.getElementById('timedMsgDiv').innerHTML = msgArr[currMsg%msgArr.length];
    };

    function init() {
     currMsg = -1;
// Customize what the loading bar shall say.
     msgArr = Array('Connecting to Workshop...', 'Authenticating Steam...', 'Retreiving Server Info...', 'Mounting Addons...', 'Initalizing Server Content...', 'Reducing Lag...', 'Loading map...', 'Getting Server IP...');
     timedMsg();
     var t=setInterval("timedMsg()",2000);
    };

    window.onload = init();
    </script>
    </center>

  <!-- MUSIC -->
  <object style="height:0px; width:0px;">
<!-- Replace the youtube link with your custom song. To disable music, leave the URL blank. -->
                        <embed src="http://www.youtube.com/v/FjNdYp2gXRY?version=3&autoplay=1&loop=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="0" height="0">
                </object>
</div>
</div>
</body>
</html>



body{
/* To change the background url. Drag your prefered image into the kezzyincload/images/<imagename>. Then change the "background3.jpg" to your image name. */
     background-image: url("../images/background4.jpg");
/* Do not change the background size */
     background-size: 100%;
}
/* Top bar */
 #topbar {
/* To change the background gradient which is black by default, use the HTML colour pickerto choose 2 colours. (#COLOUR, #COLOUR) */
     background: linear-gradient(#ABE8DF, #7AB7B7);
/* To make the background on anything fade you can change the opacity from 0.1 being lowest and 1 being highest. */
     opacity: 1;
/* To change the border on the boxes to a diffent style. You can choose from: dotted, dashed, solid, double, groove, ridge, inset, outset, none and hidden. */
	 border-style: ridge;
	 /* Change width of box. Recommended 100% by default. */	
     width: 100%;
/* Put this to "0px" if you want curved edges to be square. Default is 25px. */	 
	 border-radius: 0px;
  /* Do not edit line 15 - 18 unless you know CSS */
     height: 100%; 
     display: inline-block;
	 margin-bottom: 5px;
}

/* Container */
/* Do not edit the container unless you know CSS.*/
#container {
     width:100%;
/* To change the text position choose from: left, right, center, justify, initial and inherit. */
     text-align:center;
}

/* Left Box */
#left {
/* To change the background gradient which is black by default, use the HTML colour pickerto choose 2 colours. (#COLOUR, #COLOUR) */
     background: linear-gradient(#ABE8DF, #7AB7B7);
/* To make the background on anything fade you can change the opacity from 0.1 being lowest and 1 being highest. */
	 opacity: 1;
/* To change the border on the boxes to a diffent style. You can choose from: dotted, dashed, solid, double, groove, ridge, inset, outset, none and hidden. */	 
	 border-style: ridge;
/* Change width of box. Recommended 400px by default. */	
     width:400px;
/* Put this to "0px" if you want curved edges to be square. Default is 25px. */
	 border-radius: 0px;
/* Do not edit line 36 - 41 unless you know CSS */
     float:left;
    height: 100%;
	 padding: 0px;
}

/* Center box top */
#center {
/* To change the background gradient which is black by default, use the HTML colour pickerto choose 2 colours. (#COLOUR, #COLOUR) */
     background: linear-gradient(#ABE8DF, #7AB7B7);
/* To make the background on anything fade you can change the opacity from 0.1 being lowest and 1 being highest. */
	 opacity: 1;	 
/* To change the border on the boxes to a diffent style. You can choose from: dotted, dashed, solid, double, groove, ridge, inset, outset, none and hidden. */	 
     border-style: ridge;
/* Change width of box. Recommended 300px by default. */	
     width:300px;
/* Put this to "0px" if you want curved edges to be square. Default is 25px. */
     border-radius: 0px;
/* Do not edit line 52 - 59 unless you know CSS */
	 padding: 0px;
     margin-top: 5px;
     margin-bottom: 5px;
     display: inline-block;
    height: 100%;
}

/* Center box bottom */
#center1 {
/* To change the background gradient which is black by default, use the HTML colour pickerto choose 2 colours. (#COLOUR, #COLOUR) */
     background: linear-gradient(#ABE8DF, #7AB7B7);
/* To make the background on anything fade you can change the opacity from 0.1 being lowest and 1 being highest. */
  	 opacity: 1;
/* To change the border on the boxes to a diffent style. You can choose from: dotted, dashed, solid, double, groove, ridge, inset, outset, none and hidden. */	 
	 border-style: ridge;
/* Change width of box. Recommended 300px by default. */
     width:300px;
/* Put this to "0px" if you want curved edges to be square. Default is 25px. */
	 border-radius: 0px;
/* Do not edit line 70 - 77 unless you know CSS */
	 padding: 0px;
     margin-top: 5px;
     margin-bottom: 5px;
     display: inline-block;
    height: 100%;
}

/* Right box */
#right {	
/* To change the background gradient which is black by default, use the HTML colour pickerto choose 2 colours. (#COLOUR, #COLOUR) */
     background: linear-gradient(#ABE8DF, #7AB7B7);
/* To make the background on anything fade you can change the opacity from 0.1 being lowest and 1 being highest. */	 
     opacity: 1;
/* To change the border on the boxes to a diffent style. You can choose from: dotted, dashed, solid, double, groove, ridge, inset, outset, none and hidden. */	  
     border-style: ridge;
/* To change the text position choose from: left, right, center, justify, initial and inherit. */
	 text-align:initial;
/* Put this to "0px" if you want curved edges to be square. Default is 25px. */
	 border-radius: 0px;
/* Change width of box. Recommended 400px by default. */
     width:400px;
/* Do not edit line 90 - 95 unless you know CSS */	 
     float:right;
    height: 100%;
	 padding: 0px;
}

/* Font for titles with gradient bars */
h1, h3 { 
/* To change the font for the titles, choose from this link: http://www.w3schools.com/cssref/css_websafe_fonts.asp */
     font-family: 'Poiret One', cursive;
/* To change the text position choose from: left, right, center, justify, initial and inherit. */
     text-align: center;
/* Go here to change the gradient on the back of titles: http://www.colorzilla.com/gradient-editor/ */
     background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);
/* To change the text colour */	 
	 color: black;
}

/* Font for smaller writing */
p, li {
/* To change the font for the titles, choose from this link: http://www.w3schools.com/cssref/css_websafe_fonts.asp */
     font-family: 'Roboto Condensed', sans-serif;
/* To change the text colour */
	 color: white;
}

/* Loading bar */
#timedMsgDiv {
/* To change the font for the titles, choose from this link: http://www.w3schools.com/cssref/css_websafe_fonts.asp */
     font-family: 'Poiret One', cursive;
/* To change the text position choose from: left, right, center, justify, initial and inherit. */
     text-align: center;
/* Go here to change the gradient on the back of titles: http://www.colorzilla.com/gradient-editor/ */
     background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);
/* To change the text colour */	 
	 color: black;
/* Width of loading bar */
	 width: 100%;
}

Why would you sell this W3Schools copy-pasta?

why not just put the comments on the RIGHT after the ; in the css like seriously you can’t expect anyone to edit this.

also you need -webkit- for half of the updated stuff you’re using, gmod is outdated with it’s module.

humm there is lines you forgot to put/* at the start, and */ at the end.

Do it and your problems will be gone.