Solved

Why doesnt Firefox like my DocType? ( Wont load my stylesheet )

Posted on 2010-11-18
9
886 Views
Last Modified: 2013-12-07
I've been having problems getting firefox to apply my stylesheet to my pages :-(
( my page loads fine in IE + Safari :: Not in FireFox - doesnt apply the styelsheet )

After much playing around I have found that it is directly related to the doctype I specify and
cant figure out whats wrong with it.  If I remove the following line from my pages it loads the css fine:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

This is my whole header:

<!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>Untitled Document</title>

<link href="myStyles.css" rel="stylesheet" type="text/css" />

</head>

Here is a link to my test site: http://microb205.med.upenn.edu/newSite/myTemplate3_h.html
0
Comment
Question by:stu215
  • 3
  • 2
  • 2
  • +2
9 Comments
 
LVL 4

Accepted Solution

by:
claracruz earned 250 total points
ID: 34165778
Hmm...

The DOCTYPE is correct

Its a strange one... Looking at the page with firebug, it appears that Firefox is not able to read it. I have downloaded the css file, so it is clearly readable.


It may be that ithe CSS file is served on the server with a mime-type that leads Firefox to belive it cannot read the file. e.g. application/octet-stream. see here

Possible causes and solutions
How are you getting the file onto the server -  If not by FTP, then use FTP. If by FTP then try a different FTP client. FileZilla is pretty good
If that fails, Per chance, Is WEBrick used to provide HTTP web server services. Are you privy to this info?
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 34166227
I think @claracruz is right, your CSS file is being 'served' with the wrong MIME type.  The server appears to be something called "Snap Appliance Inc./3.4.803".
0
 
LVL 11

Expert Comment

by:Akenathon
ID: 34166361
Your server is providing the wrong MIME type, Chrome also says: "Resource interpreted as stylesheet but transferred with MIME type application/octet-stream.".

Try uploading a trivial CSS created from scratch with a text editor in place of yours, containing something easy to see like "body {background-color: red; }". If that does not work, you have confirmed it's your server configuration that is serving .css extensions as the wrong MIME type.
0
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 
LVL 10

Author Comment

by:stu215
ID: 34166885
O.o they are using a snap server 1100 ( ftp appliance ) instead of a webserver...

It offers up the ability to make files available via HTTP but is not really a webserver from what I gather.
Yet IE + Safari can see things fine, and if I remove the line for the doctype FireFox reads it kinda too:
Link to file w out doctype: http://microb205.med.upenn.edu/newSite/myTemplate3_h_copy.html

( The drop down menu's dont work without the doctype though )

-- They are in the process of looking into getting a real webserver but I need to get something going in the mean time.

I cant figure out why it doesnt like the doctype line though.

0
 
LVL 10

Author Comment

by:stu215
ID: 34166926
-- I use dreamweaver CS5 & FTP my files to the site.
-- I also tried deleting the site and FTPing it back with WSFTP
0
 
LVL 10

Author Comment

by:stu215
ID: 34167093
If I put the CSS directly in the page it works correctly in FireFox, but I'd rather not have to modify every page when I want to change something and re-upload the whole site.

Link To CSS in page ( not linked ): http://microb205.med.upenn.edu/newSite/myTemplate3_h_test.html

Hoping theres some way to modify the doctype so FireFox is happy?
0
 
LVL 4

Assisted Solution

by:claracruz
claracruz earned 250 total points
ID: 34167393
I am guessing now, but it is likely that the reason that it works without a DOCTYPE is because the communication protocol is then no longer interpreted as HTTP possibly by the Snap server thing that's a server but not... and possibly then does not deliver the content type for CSS files as application/octet-stream

My knowledge of internet/sever/communication protocols and how they work is very rusty indeed, but I'll bet I am not far from right on this.

So best bet, Ask your *hosting provider* to add the MIME type for css to mime.types on the server. If they can't do it, change hosting provider. What is a web host if they cannot deliver CSS files correctly on their servers.

It is a standards violation apparently for the other browsers to work correctly. Adhering strictly to standards means stylesheets will not load unless its content type is text/css.

0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 34167768
Modifying the DOCTYPE so it will work when it is clearly broken on the server is just asking to have change it again when the other browsers decide to be stricter about the MIME types.
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 34170016
Just put your CSS  WITHIN the page itself, and you should be fine.  Snap servers are NOT web servers, but if ALL the code is in the HTML file, you will be fine.
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

786 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question