Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why stylesheet doesn't work?

Tags:

html

css

thttpd

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

like image 296
mans Avatar asked Apr 23 '26 09:04

mans


2 Answers

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

like image 148
Matt Gibson Avatar answered Apr 24 '26 22:04

Matt Gibson


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.

like image 35
Rob Avatar answered Apr 24 '26 21:04

Rob



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!