Databases
StackOverflow2013
Postsdbo
POHTML 5 not applying my CSS
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML 5 not applying my CSS
    text
    copied!<p>This is my HTML</p> <pre><code>&lt;!doctype html&gt; &lt;html lang="en" id="home"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Me&lt;/title&gt; &lt;link rel="stylesheet" href="css/reset.css" /&gt; &lt;link rel="stylesheet" href="css/style.css" /&gt; &lt;/head&gt; &lt;body style&gt; &lt;div class="centered"&gt; &lt;img alt="Me" id="Me" src="cache/me.jpg" /&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>This is the style.css</p> <pre><code>.centered { position: fixed; top: 50%; left: 50%; margin-top: -300px; margin-left: -200px; } #Me { display: block; margin: 0 auto; width: 400px; height: 600px; } </code></pre> <p>If I put the contents of the style.css file into a style tag inside the HTML it would apply the stylesheet just fine. If I delete the <code>&lt;!doctype html&gt;</code> then it would render the page just fine. I've validated the HTML using the W3C validator it passed just fine.</p> <p><strong>EDIT:</strong> I've copied all the files from the site to my local drive and opened index.html in Chrome. It is rendering fine but it still doesn't explain why deleting the <code>&lt;!doctype html&gt;</code> fixes it also.</p> <p><strong>EDIT:</strong> Using firefox's developer tools, there is an error: <strong>The resource from this URL is not text: <a href="http://foo.foo/css/reset.css" rel="nofollow">http://foo.foo/css/reset.css</a></strong>. This must be web server configuration issue because according to this <a href="https://developer.mozilla.org/en/docs/Incorrect_MIME_Type_for_CSS_Files" rel="nofollow">link</a> <em>"The W3C specification mentions that CSS files should be served with a "text/css" MIME type"</em> and <em>"in "strict mode" will follow the specification closely and expect the CSS file to be served with a correct MIME type"</em>.</p> <p><strong>EDIT:</strong> Run fiddler to debug the HTTP connections. The CSS files are being sent as "application/octet-stream". This is the HTTP header:</p> <pre><code>HTTP/1.1 200 OK Content-Type: application/octet-stream ETag: "3420655293" Last-Modified: Fri, 04 Oct 2013 13:26:57 GMT Content-Length: 765 Date: Fri, 04 Oct 2013 13:54:49 GMT Server: lighttpd/1.4.33 </code></pre> <p><strong>EDIT:</strong> I found out what the problem was. It was mis-configured web server; the mime-types for CSS was not declared it defaulted to <strong>text/plain</strong> instead of <strong>text/css</strong>.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload