XHTML doctype "breaking" css in firefox

Forum Moderators: open

Message Too Old, No Replies

XHTML doctype "breaking" css in firefox

spykadesign

11:56 pm on Feb 11, 2006 (gmt 0)

Hey, im currently devolping a website however i have run accross a problem. The website looks fine in IE and Firefox, however when i added a XHTML1.0 Doctype:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Firefox wont import the css (Well i dont know exactlly what its doing but thats what appears to happen)

Just to check it was this i removed the doctype and design looks normal.

You can view the new website: <Sorry, no personal URLs. See Terms of Service [webmasterworld.com]> (see it in both ie and ff to see what i mean)

[edited by: tedster at 12:09 am (utc) on Feb. 12, 2006]

tedster

12:20 am on Feb 12, 2006 (gmt 0)

Welcome to the forums- hope we can help. Have you validated your code with the W3C with the xhtml dtd in place?

W3C Validator - HTML [validator.w3.org]
W3C Validator - CSS [jigsaw.w3.org]

encyclo

1:50 am on Feb 12, 2006 (gmt 0)

Hi spykadesign and welcome to the forums! If the CSS file isn't being loaded at all in Firefox when you add the XHTML doctype, then the problem is a usually a server misconfiguration. Adding the doctype switches the browser rendering mode into standards-compliance mode, and in this mode Firefox requires that CSS files are sent with the MIME type

text/css

. In quirks mode (without the doctype) Firefox will accept CSS files sent with an incorrect MIME type such as

text/plain

text/html

To test, open up the CSS file directly in the browser, then press Control + I (Page Info). The "Type" should say

text/css

. If it says something else, you can change the MIME type yourself if you can use a .htaccess file by adding this:

AddType text/css .css

Otherwise contact your hosting company.

spykadesign

12:22 pm on Feb 12, 2006 (gmt 0)

I think i figured out why it wasnt working - i was forcing all files to parse as php:

<Files *>
ForceType application/x-httpd-php
</Files>

If i remove this from my .htaccess it works, now the problem is how can i access my php files without using the .php extentsion e.g. just [whatever.com...]

encyclo

1:18 pm on Feb 12, 2006 (gmt 0)

You can keep the ForceType in place, but the CSS is parsed as PHP and is given the MIME type

text/html

by default.

If you can't place the CSS file in a directory where the ForceType isn't in operation, then you can specify the correct MIME type with PHP directly in the CSS file. You will also need to allow the file to be cached by the browser, as PHP removes cache headers and it would mean the CSS file would be called from the server for each page view, which would negate the advantage of a separate CSS file.

Try adding something like this to the top of the CSS file:

<?php
/* set MIME type */
header("Content-Type: text/css");
/* set caching to a reasonable value */
header("Cache-Control: must-revalidate");
$offset = 72000 ;
$ExpStr = "Expires: " .
gmdate("D, d M Y H:i:s",
time() + $offset) . " GMT";
header($ExpStr);
?>

That should get you started. :)