title: Stylesheet not working in Chrome/Safari but can work in Internet Explorer
body: <p><strong>TL;DR</strong></p>
  
  <p>I've read through many questions on Stack Overflow on this issue and I've tried to follow the given advice. Still, my CSS stylesheet will not work in Chrome/Safari but it <em>can</em> work in Internet Explorer.</p>
  
  <p>The only odd thing that I can see about my scenario is my server is returning all files as of type <code>application/octet-stream</code>. I cannot change this aspect of the server. Is there something I can do to interpret my CSS file as a stylesheet in Chrome/Safari and IE?</p>
  
  <hr>
  
  <p>I have an embedded web server project that I am working on. I have very limited control of the server software and the ability to make page-level settings. All I can do is create static HTML, CSS, and image files that are compiled into the server application.</p>
  
  <p>As such, all files that are returned from the embedded server are declared as <code>application/octet-stream</code> in the <code>HTTP</code> header. This produces warnings in Chrome but no errors.  </p>
  
  <p>Initially, I had a problem loading this style sheet in Chrome/Safari but it would work in IE. After reading through a couple questions on Stack Overflow, I found that I needed to change my stylesheet declaration from:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="/styles/index.css"&gt;
  </code></pre>
  
  <p>to:</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="/styles/index.css"&gt;
  </code></pre>
  
  <p>When I made this change Chrome &amp; Safari still failed to process the CSS file but IE also started to ignore the stylesheet.  </p>
  
  <p>Oddly, if I <strong>do not</strong> declare a <code>DOCTYPE</code> on my HTML document I can get linked stylesheets to work in all of my browsers. This is, however, not a desirable solution.</p>
  
  <p>My guess is this issue has something to do with the <code>HTTP</code> header declaration and that it doesn't match the type declared in the <code>link</code> element.</p>
  
  <p>What can I do to get this stylesheet to work in Chrome, Safari, and IE while following good web development codes-of-practice (i.e. using doctypes on my HTML files and not embedding the style code in the HTML headers?)</p>
  
  <p>For clarity sake, the relevant CSS/HTML code is shown below.</p>
  
  <p><strong>index.css</strong></p>
  
  <pre><code>html {height:100%}
  body {margin:0;min-height:100%;position:relative}
  iframe {width:100%;height:100%;border:none}
  
  .hdr {min-width:765px;overflow:auto}
  .logo1 {float:left;margin:4px}
  .logo2 {float:right;margin:4px}
  .menu {position:absolute;top:70px;left:0px;bottom:0px;width:175px}
  .content {position:absolute;top:70px;left:175px;bottom:0px;right:0px;}
  </code></pre>
  
  <p><strong>index.htm</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=windows-1252"&gt;
  &lt;link rel="stylesheet" href="/styles/index.css"&gt; &lt;!-- Removed the type declaration so that  this would at least work in IE9 //--&gt;
  &lt;/head&gt;
  &lt;body lang="en-us"&gt;
  &lt;div class="hdr"&gt;&lt;img class="logo1" src="/images/logo1.png" alt="Logo #1"&gt;&lt;img class="logo2" src="/images/logo2.png" alt="Logo #2"&gt;&lt;/div&gt;
  &lt;div class="menu"&gt;&lt;iframe name="menu" src="/menu.shtm"&gt;&lt;/iframe&gt;&lt;/div&gt;
  &lt;div class="content"&gt;&lt;iframe name="main" src="/home.htm"&gt;&lt;/iframe&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>FYI, this is a new project that is being developed from an existing one. The original project did not declare a <code>DOCTYPE</code> on the HTML files. Therefore, all page data was loaded and executed in the browser in quirks mode. Furthermore, the <code>index.htm</code> originally consisted of multiple <code>frames</code> within a <code>frameset</code>.  </p>
  
  <p>I am trying to update this application, using correct, and up to date methods for developing web pages. I can make this application work, but I feel that this would be at a sacrifice of future-browser compatibility if I have to rely on browser quirks mode and framesets.</p>
  
  <p>I have tried to close the link tag but that doesn't help. Technically, this shouldn't be an issue since this document is declared as an HTML5 document, rather than XHTML.</p>