Solved

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

Posted on 2010-11-18
9
881 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 82

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
 
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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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 82

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

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…
Citrix XenApp, Internet Explorer 11 set to Enterprise Mode and using central hosted sites.xml file.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

744 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now