3

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

Cœur
  • 37,241
  • 25
  • 195
  • 267
mans
  • 17,104
  • 45
  • 172
  • 321

2 Answers2

3

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.)

Matt Gibson
  • 37,886
  • 9
  • 99
  • 128
  • the html already has it: ... type="text/css" should I add it some where else? – mans Jan 10 '14 at 17:09
  • Basically, the problem is with the headers being sent back by thttpd. Your installation seems to be serving the css file with a "text/html" header, which will cause IE to ignore it. Recent versions of thttpd seem to have support for marking .css files as "text/css", which will work -- I just checked the source code of the latest version and in "mime_types.txt" it lists CSS files and says it will serve them as "text/css". – Matt Gibson Jan 10 '14 at 17:12
  • Also: [this looks like a decent introduction to HTTP headers](http://net.tutsplus.com/tutorials/other/http-headers-for-dummies/) if you've not had much experience with them before. – Matt Gibson Jan 10 '14 at 17:18
  • Thanks. Do you know how I can add the new mime types to thttpd? I can compile it if I know how I can add new mime types to it. – mans Jan 10 '14 at 17:19
  • The latest version of it seems to have built-in support for serving .css files as text/css. Certainly I just grabbed 2.25b from their [homepage](http://acme.com/software/thttpd/) and it's listed in `mime_types.txt`. What version are you using at the moment? – Matt Gibson Jan 10 '14 at 17:20
  • I don't know, I did not compile it but one of my colleagues did it. How can I find it? I have access to embedded system and also its output. – mans Jan 10 '14 at 17:23
  • (If you have the source for your current version, and it has a mime_types.txt file in it, try adding a line saying `css text/css` in exactly the same format as the existing lines (i.e. with a tab character separating `css` and `text/css`. Then recompile. (The Makefile actually builds thttpd by including information from that file.) – Matt Gibson Jan 10 '14 at 17:23
  • @mans I've updated my answer with a bit more about compiling or updating thttpd. This should probably be all your colleague who compiled thttpd needs to know to get things working for you. – Matt Gibson Jan 10 '14 at 17:29
2

There's nothing wrong with your HTML page or the css, so I presume your browser is either unable to fetch the css (could be the URL is wrong?) or it is using a cached version of the css. (if using IE then try CTRL+f5)

If this doesn't help, then depending on which browser you are using, I suggest you switch on the Developer Tools and trace the network calls and status codes returned. E.G for Internet Explorer, hit F12, switch to the Network tab and enable "Start Capturing". For an even more detailed view into what's going on behind the scenes, then Fiddler is a great tool.

Rob
  • 1,472
  • 12
  • 24