Firefox 3 syntax error with external css

StackOverflow https://stackoverflow.com/questions/842627

Question

I get a strange syntax error in Firefox 3.0.10/Leopard when using the following html/css:

foo.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
  <link rel="stylesheet" href="foo.css"/>
</head>
<body>
Foo
</body>
</html>

foo.css:

div {
  color: #FF0000;
}

and the error I get in the console is:

Error: syntax error
Source File: file://path/to/foo.css
Line: 1, Column: 1
Source Code:
div {

It's not the CSS, because pasting it into the body of an inline STYLE tag works fine. It's not the link tag, because pointing the HREF to stack overflow's css file doesn't give an error. Feels like a Firefox bug, but I can't find any documentation on it. Is this a known issue, and is there a workaround? It makes it hard to debug or validate.

Thanks.

Was it helpful?

Solution 2

The answer turned out to be "Turn off extensions (it was YSlow)" as suggested in the comments.

OTHER TIPS

It's giving you the error on the first character in the file, which is a 'd', which rules out things like "hidden" special characters to me. I'd guess that firefox isn't able to open the file locally for whatever reason, or that the file was accidentally saved with an encoding that, although it displays fine in the dialog box, doesn't parse normally. Perhaps it's saved as Unicode by mistake?

If you could link us to the actual file it would help, since your syntax (despite the markup not being exactly valid, but I don't think that's it) is perfect in the .css file you pasted in.

Was the file written on windows? Maybe you need to reformat the carriage return/new line to mac os x. try running the file through something like dos2unix on the command line. Could also be a bom you're not seeing.

My guess is that there's some hidden character that might have been accidentally saved in the file. Try re-saving the CSS file, or re-typing the first line and then re-saving it.

If you're here from Google and working with local html, note that Firefox blocks requests for external CSS that use the file:// protocol because it's technically a cross-origin request.

A quick fix is to serve the directory that contains your site to localhost over http://. If you have the python interpreter installed, you can do this very easily:

python3 -m http.server 8080

Then access localhost through your browser:

firefox localhost:8080

You can replace 8080 with any other port.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top