Stylesheet not working in Chrome/Safari but can work in Internet Explorer
css, google-chrome, html, http-headers, internet-explorer
Solution
I hate to have to answer my own question this way but the problem was most certainly with the fact that the server was returning a content type of `application/octet-stream` within the HTTP header.
After discussing the issue with management we had to update the code associated with the HTTP processor. This is code that is part of a third-party RTOS and we have been extremely hesitant to making any changes to this code.
However, in this case the need has out-weighed that desire. I've integrated the necessary changes to fix the HTTP header to return a content type of "text/css" for cascading style sheets. All is now right with the world.
Problem
TL;DR 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 can work in Internet Explorer. The only odd thing that I can see about my scenario is my server is returning all files as of type `application/octet-stream`. 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? 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. As such, all files that are returned from the embedded server are declared as `application/octet-stream` in the `HTTP` header. This produces warnings in Chrome but no errors. 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: ``` <link rel="stylesheet" href="/styles/index.css"> ``` to: ``` <link rel="stylesheet" type="text/css" href="/styles/index.css"> ``` When I made this change Chrome & Safari still failed to process the CSS file but IE also started to ignore the stylesheet. Oddly, if I do not declare a `DOCTYPE` on my HTML document I can get linked stylesheets to work in all of my browsers. This is, however, not a desirable solution. My guess is this issue has something to do with the `HTTP` header declaration and that it doesn't match the type declared in the `link` element. 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?) For clarity sake, the relevant CSS/HTML code is shown below. index.css ``` 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;} ``` index.htm ``` <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <link rel="stylesheet" href="/styles/index.css"> <!-- Removed the type declaration so that this would at least work in IE9 //--> </head> <body lang="en-us"> <div class="hdr"><img class="logo1" src="/images/logo1.png" alt="Logo #1"><img class="logo2" src="/images/logo2.png" alt="Logo #2"></div> <div class="menu"><iframe name="menu" src="/menu.shtm"></iframe></div> <div class="content"><iframe name="main" src="/home.htm"></iframe></div> </body> ``` FYI, this is a new project that is being developed from an existing one. The original project did not declare a `DOCTYPE` on the HTML files. Therefore, all page data was loaded and executed in the browser in quirks mode. Furthermore, the `index.htm` originally consisted of multiple `frames` within a `frameset`. 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. 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.