homepage Welcome to WebmasterWorld Guest from 54.205.144.54
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Browsers / Firefox Browser Usage and Support
Forum Library, Charter, Moderators: incrediBILL

Firefox Browser Usage and Support Forum

    
When only Firefox is not applying an external CSS file
tedster




msg:3035059
 4:42 am on Aug 5, 2006 (gmt 0)

A friend brought me this mystery last week, and I thought a post about the answer we found might help.

The html and css for this website validated when uploaded from his local machine. It was strict html 4, so naturally it should be rendered in standards mode. And yet, when browsing to the online pages with Firefox, the page was TOTALLY unstyled -- even though Opera and IE looked perfect.

One clue -- when he removed the DTD and threw things into quirks mode, there was some styling (even though the layout suffered greatly).

The answer was immediate when I asked the W3C to validate the online .css file -- the mime type for a .css file was improperly configured on the server. It was set to text/plain when it should be text/css (thanks to the W3C for catching this.)

IE and Opera will forgive this little error, but FireFox will not. In our case, we knew the server admin was not quite with-it, and was also not available, so we uploaded an htaccess file with one line:

AddType text/css .css

All fixed. But if you don't know about mime types ahead of time, this can prove a difficult problem to research -- so I thought I'd share the information for future reference.

AFTER I found the answer, I also found several threads here that mention the issue, even from this year:

[webmasterworld.com...]
[webmasterworld.com...]
[webmasterworld.com...]

 

encyclo




msg:3035447
 4:34 pm on Aug 5, 2006 (gmt 0)

Another common issue seen with the switch between standards-compliance mode and quirks mode is how errors in the CSS are handled.

A good example is for colors. In quirks mode, the following (invalid) syntax will work:

h1 {color:ffcc99;}

In standards-compliance mode, you must use the # sign:

h1 {color:[b]#[/b]ffcc99;}

I didn't realize that the CSS validator was not checking the declared MIME type, though, I had not seen that before!

coopster




msg:3036389
 6:06 pm on Aug 6, 2006 (gmt 0)

It's not just FireFox either, I'm fairly certain is any mozilla-based browser. I ran into this very same issue on a shared host on a project for a client a few years ago. I was testing in a mozilla-based browser and style was not rendering correctly. If you state strict, the browser engine answers correctly!

tedster




msg:3036766
 2:14 am on Aug 7, 2006 (gmt 0)

I didn't realize that the CSS validator was not checking the declared MIME type

I assume that was a typo, encyclo, and you meant "was now checking..." It was a surprise to me, too, but I really liked it. I will now do a lot more validation of css from the server instead of from a local version.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Browsers / Firefox Browser Usage and Support
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved