CSS stylesheet working from one location but not another - css

Question

I've been working on a basic website using just HTML and CSS. The files were saved to a network location and worked fine when previewed in different browsers. I'm doing this at work, so I wanted to take it home and work on it. I copied all the files to a memory stick, keeping the structure the same so that no file paths have changed, and even though it was exactly the same code, the style sheet suddenly wouldn't work properly.
Some of the style sheet works, like the text colours and the background image, so I know it's being seen, but the layout is messed up. I'm using the same browser so I don't understand why the styles work when opened from one location, but only half work when opened from another. As I said, I've checked the file paths and this isn't the problem.
Futhermore, I copied the files to a different location on my desktop from the original location and they messed up again, but in a different way. I copied the files from the memory stick back to the network and it was again messed up.
These are exactly the same files, so I don't understand why sometimes it's working fine and other times it's not. If anyone can offer some insight that would be great!
body {
font-family: Tahoma, Geneva, sans-serif;
background-color: #404040;
background-image: url("Pictures/background.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
color: #ffffff;
padding: 5px;
}
#main {
width: 75%;
margin: auto;
}
header{
width: 100%;
background-color: #404040;
opacity: 0.9;
filter: alpha(opacity=90);
padding-top: 5px;
}
#logo {
width: 300px;
padding: 5px;
border: none;
}
#title {
text-align: center;
border-top: solid 7px #DDD;
border-bottom: solid 7px #DDD;
line-height: 0.5;
padding-bottom: 20px;
}
#title h1 {
font-size: 4.68em;
font-weight: normal;
}
#title p {
color: rgb(63,174,42);
font-size: 1.37em;
}
nav {
width: 100%;
overflow: auto;
background-color: #404040;
opacity: 0.9;
filter: alpha(opacity=90);
border-bottom: 2px solid white;
}
#menu {
list-style-type: none;
margin: 0;
padding-top: 15px;
padding-bottom: 15px;
float: right;
}
.menubutton {
display: inline;
padding-top: 15px;
padding-bottom: 15px;
border-left: 5px solid #404040;
border-right: 5px solid #404040;
}
.menubutton a {
color: white;
padding: 15px;
text-decoration: none;
font-weight: bold;
}
.menubutton:hover {
background-color: rgb(133,15,102);
}
.menubutton a:hover {
color: white;
}
#current {
display: inline;
padding-top: 15px;
padding-bottom: 15px;
border-left: 5px solid rgb(133,15,102);
border-right: 5px solid rgb(133,15,102);
}
#current a {
color: white;
padding: 15px;
text-decoration: none;
font-weight: bold;
}
#current:hover {
background-color: rgb(133,15,102);
}
#current a:hover {
color: white;
}
section {
width: 100%;
background-color: #404040;
opacity: 0.9;
filter: alpha(opacity=90);
padding-bottom: 5px;
}
aside {
width: 25%;
float: left;
padding: 10px;
}
.sidebarpost {
width: 90%;
margin: auto;
border: 2px solid rgb(133,15,102);
border-radius: 5%;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 10px;
}
article {
width: 65%;
float: right;
margin-right: 35px;
}
article h1, h2, h3, h4, h5, h6 {
color: rgb(63,174,42);
font-weight: normal;
}
h1 {
font-size: 2em;
padding-top: 10px;
text-align: center;
}
h3 {
font-style: italic;
font-size: 23px;
}
h4 {
font-size: 18px;
}
.post {
padding: 10px;
border-bottom: 2px solid;
border-color: rgb(133,15,102);
}
#lastpost {
padding: 10px;
}
#marathon {
width: 65%;
display: block;
margin: auto;
text-align: center;
}
a {
color: white;
}
a:hover {
color: rgb(133,15,102);
}
.date {
font-style: italic;
font-size: 12.5px;
}
table {
padding: 5px;
}
tr {
padding: 10px;
}
td {
padding: 10px;
}
section:after {
content: "";
display: table;
clear: both;
}
#media (max-width: 600px) {
aside, article {
width: 100%;
height: auto;
}
}
footer {
width: 100%;
border-top: 2px solid white;
padding-top: 25px;
padding-bottom: 25px;
background-color: #404040;
opacity: 0.9;
filter: alpha(opacity=90);
}
footer p {
text-align: center;
color: rgb(63,174,42);
}
<!DOCTYPE HTML>
<html>
<head>
<title>CCL HOMEPAGE</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=windows-1252" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="main">
<header>
<img src="Pictures/Logo.png" id="logo"></ br>
<div id="title">
<h1>One Step Ahead</h1>
<p>Digital Forensics, Data Analytics and Cyber Security</p>
</div><!--title-->
</header>
<nav>
<ul id="menu">
<li id="current">Home</li>
<li class="menubutton">News</li>
<li class="menubutton">SOPs, Policies and Forms</li>
<li class="menubutton">Official Drive</li>
<li class="menubutton">FocalPoint</li>
<li class="menubutton">HR</li>
</ul><!--menu-->
</nav>
<section>
<aside>
<div class="sidebarpost">
<h3>Latest News</h3>
<h4>NEW INTRANET LAUNCHED</h4>
<p class="date">July 2nd, 2018</p>
<p>2018 sees the redesign of our intranet. Take a look around and let us know what you think.</p>
</div><!--sidebarpost-->
<div class="sidebarpost">
<h4>Useful Links</h4>
<ul>
<li>Contracted Clients</li>
<li>Sales Clients</li>
<li>Focal Point</li>
<li>Google</li>
</ul>
</div><!--sidebarpost-->
</aside>
<article>
<div class="post">
<h1>Homepage Launch</h1>
<p>Welcome to CCL's Homepage. The homepage will be updated with Company news and have pages that aid with access to the most up to date SOP's, policies, procedures and documentation for the business.</p>
</div><!--post-->
<div class="post">
<h2>Dragon Boat Racing</h2>
<p class="date">July 2nd, 2018</p>
<p>There are a limited number of spaces left on this year's Dragon Boat Racing team! The event takes place on 16th September. If you're interested in joining, please email . Click here for more information about the day.</p>
<p>There's also a home made cake up for grabs for the person who comes up with the best team name!</p>
<p>The team so far is:
<ul>
<li></li>
</ul>
</p>
</div><!--post-->
<div class="post">
<h2>Blog Posts</h2>
<p>‘Defence Cases’ written by Jason Dickson</p>
<p>‘The New Nokia 3310: Part 1’ written by Arun Prasannan</p>
</div><!--post-->
<div id="lastpost">
<h2></h2>
<p></p>
</div><!--lastpost-->
</article>
</section>
<footer>
<p>For any updates or additions, please email </p>
</footer>
</div><!--main-->
</body>
</html>
Update: just seen this is only a problem in IE11, unfortunately this is the browser it needs to run on.
Update: When I open the developer tool in IE11, it shows the html is not being loaded correctly. I've got a screenshot to show the difference between the code in the console and my source code. I think this is the issue, as the layout elements such as and are being closed before the actual content inside them, however as can be seen from the text document, this is not how I've programmed it. Any ideas why it would be doing this?

Answer 1

Turns out it was the compatibility mode settings. Not sure why these were on in one tab but not in another, but it's working now.