Search code examples
htmlcssthttpd

Why stylesheet doesn't work?

I have a simple html page as follow:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test title</title>
 <link href="style.css" rel="stylesheet" type="text/css" />

 </head>
 <body>
     <span class="test">Test</span>
 </body>
 </html>

and the style.css is follow:

.test{
 color:yellow;
}

I suspect that the output be a yellow test, but it is a black one.

If I use this link:

http://url/style.css

I can see the content of CSS so I believe the client can read it.

I am using thttpd as web server on an embedded system.

screen capture of what IE developer shows: No style is applied

which shows that both html and css are getting by IE.

style is taken from server

Solution

  • You say you're working with thttpd on an embedded system. Given that your code is fine, I expect what's happening is that your styles are being ignored by IE because your web server isn't serving them with the correct content type.

    From MIME types and stylesheets on MSDN:

    Starting with IE9 Standards mode, style sheets will be ignored (not applied) unless they are delivered with a "text/css" MIME type.

    So, I'd suggest looking into your thttpd configuration, to see if you can add instructions to apply the 'text/css' MIME type to .css files.

    UPDATE: I can see from your screenshot that the stylesheet is being served with "text/html", which pretty much confirms my diagnosis. The CSS file should be being served as "text/css".

    The documentation for thttpd suggests that you can only change the MIME types it supports at compile time, so to fix the problem, you'll need to recompile.

    The latest version of thttpd I can see, 2.25b, has CSS files correctly marked as text/css in its mime_types.txt, so you could just get the latest version and use that.

    Alternatively, add the line

    css text/css

    to your existing version's mime_types.txt, if you've compiled from source, and recompile. The thttpd Makefile uses that text file to compile the correct MIME types per file extension into the binary. (Note that the file format needs a tab character between the file extension and the MIME type.)

    (Given that embedded systems aren't normally that great at handling multiple connections, you could also just embed your style in a <style> element in the header of your HTML document, which will (a) work with your current setup, and (b) save making a second request to get a separate CSS file.)