title: Internet Explorer 11 not loading external CSS
body: <p>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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;meta charset="UTF-8"&gt;
   &lt;title&gt;Dundas Data Test&lt;/title&gt;
   &lt;link href="dundas.css" type="text/css" rel="stylesheet"&gt;
   &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="vkbeautify.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body onLoad="reset()"&gt;
      &lt;div&gt;
          &lt;div&gt;
           &lt;header&gt;
            &lt;h1&gt;Test&lt;/h1&gt;
          &lt;/header&gt;
              &lt;div id="colA"&gt;
                  &lt;label class="userInputs"&gt;Name/Value Pair&lt;/label&gt;&lt;br&gt;
                  &lt;input id="userInput" class="userInputs" type="text" &gt;&lt;br&gt;
                  &lt;label class="userInputs"&gt;Name/Value Pair List&lt;/label&gt;&lt;br&gt;
                  &lt;select size="10" multiple id="listDisplay"&gt;&lt;/select&gt;
              &lt;/div&gt;
              &lt;div id="right"&gt;
                  &lt;button class="buttons" type="button" onClick="addToList()"&gt;Add&lt;/button&gt;&lt;br&gt;
                  &lt;button class="buttons" type="button" onClick="sortByName()"&gt;Sort by Name&lt;/button&gt;&lt;br&gt;
                  &lt;button class="buttons" type="button" onClick="sortByValue()"&gt;Sort by Value&lt;/button&gt;&lt;br&gt;
                  &lt;button class="buttons" type="button" onClick="deleteItem()"&gt;Delete&lt;/button&gt;&lt;br&gt;
                  &lt;button class="buttons" type="button" onClick="createXML()"&gt;Show XML&lt;/button&gt;         
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>