I am trying to make a small web utility that allows a user to enter some data. It has an external stylesheet. The stylesheet loads correctly in Firefox and Chrome but does not load in IE 11. I have run both the CSS and HTML through the W3C validator and everything appears to be fine. I looked at all the posts similar to this problem but still having the problem. Any suggestions will be greatly appreciated. Below is the HTML and CSS. I am not at web designer so my HTML and CSS is a bit rusty :). Also I removed the javascript since that functionality works. Its just appears the CSS will not load in IE 11.
#colA {
width: 50%;
float: left;
max-width: 480px;
}
.userInputs {
width: 90%;
float: left;
}
#right {
padding-top: 20px;
float: left;
}
#userDisplay {
width: 90%;
float: left;
}
/* Styling for the Name/Value Pair List */
#listDisplay {
min-width: 90%;
float: left;
height: 200px;
}
/* Styling for all buttons */
.buttons {
margin-bottom: 20px;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Dundas Data Test</title>
<link href="dundas.css" type="text/css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="vkbeautify.js"></script>
</head>
<body onLoad="reset()">
<div>
<div>
<header>
<h1>Test</h1>
</header>
<div id="colA">
<label class="userInputs">Name/Value Pair</label><br>
<input id="userInput" class="userInputs" type="text" ><br>
<label class="userInputs">Name/Value Pair List</label><br>
<select size="10" multiple id="listDisplay"></select>
</div>
<div id="right">
<button class="buttons" type="button" onClick="addToList()">Add</button><br>
<button class="buttons" type="button" onClick="sortByName()">Sort by Name</button><br>
<button class="buttons" type="button" onClick="sortByValue()">Sort by Value</button><br>
<button class="buttons" type="button" onClick="deleteItem()">Delete</button><br>
<button class="buttons" type="button" onClick="createXML()">Show XML</button>
</div>
</div>
</div>
</body>
</html>