FF 1.5.0.4 Breaks CSS File

[SharkBait]

This is the error I get when I look at one of my sites on my test machine via the JavaScript Console in FireFox:

[!--quoteo--][div class=\'quotetop\']QUOTE[/div][div class=\'quotemain\'][!--quotec--]
Error: The stylesheet [a href=\"http://tyswebserver/testsite/includes/styles.css\" target=\"_blank\"]http://tyswebserver/testsite/includes/styles.css[/a] was not loaded because its MIME type, "text/html", is not "text/css".
Source File: [a href=\"http://tyswebserver/testsite/index.php\" target=\"_blank\"]http://tyswebserver/testsite/index.php[/a]
Line: 0
[/quote]

Now this is the CSS file (I'm still learning how to do CSS properly so please bare with me):

[code]
/****************************************
MAIN CSS FILE
/****************************************/

body {
    margin: 0;
    padding: 0;
    background-color: #ddd;
}

a:link, a:visited, a:hover, a:active {
    color: #00f;
    text-decoration: none;
}

a:hover {
    color: #000;
}
a:active {
    color: #00f;
}

#maincontainer {
    width: 800px;
    border: none;
    text-align: left;
}

p.login {
    font-size: 12px;
    padding-left: 5px;
}

.username {
    padding: 0;
    margin: 0;
    font-weight: bold;
    color: #f00;
}

#leftnav {
    width: 160px;
    padding: 0;
}

#title {
    margin: 10px 5px;
}

.navcontainer {
    float:left;
    border: 1px solid #000;
    color: #fff;
    font-weight: bold;
    text-align: center;
    background-image: url(../graphics/cell1.gif);
    margin: 5px;
    width: 150px;
}

.header {
    border: 1px solid #000;
    margin: 10px 5px;
    background-image: url(../graphics/cell1.gif);
    margin-left: 150px;
}

.navsub {
    background-color: #fff;
    color: #000;
    text-align:left;
    font-weight: normal;
    padding: 5px;
}

#leftnav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#notes {
    margin: 0;
    padding: 0;
    font-size: 120%;
}
#notes ul li {
    list-style-type: none;
    font-weight: bold;
}

#notes ul li ul li {
    font-size: 90%;
    font-weight: normal;
}

h2 {
    color: #00f;
    text-align: center;
}
.error {
    color: #ff0000;
    font-weight: bold;
    font-size: 105%;
    text-align: center;
}

.rowOne {
    background-color: #ddd;
}
.rowTwo {
    background-color: #eee;
}

.topmenu {
    background-color: #fff;
    font-weight: normal;
    text-align: left;
    padding: 0;
    margin: 0;
    padding-left: 2px;
}
.topmenu ul {
    list-style-type: none;
}
.topmenu ul li a {
    color: #00f;
}
.topmenu ul li a:hover {
    color: #000;
}
.title_header {
    border: 1px solid #000;
    color: #fff;
    font-weight: bold;
    text-align: center;
    background-image: url(../graphics/cell1.gif);
    margin: 0;
}
#testlinks {
    margin-top: 5px;
}
#testlinks ul {
    padding: 0;
    margin: 0;
    color: #000;
    font-size: 10pt;
}
#testlinks table td a {
    margin: 0;
    padding: .5px;
    display: block;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    border-top: 1px solid #aaa;
    border-left: 1px solid #aaa;
    text-align:center;
}
#testlinks table td a:hover {
    background-color: #ccc;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
}

#footer {
    clear:both;
}
[/code]

IE 7 (and 6) loads the CSS without issues. Anyone know a) my CSS is correct andor b) This is a bug with the latest update with FireFox?

I did run the CSS throught the CSS Validator and this is what came up:

[!--quoteo--][div class=\'quotetop\']QUOTE[/div][div class=\'quotemain\'][!--quotec--]
To work as intended, your CSS style sheet needs a correct document parse tree. This means you should use valid HTML.
[/quote]

Though what am I doing that isnt valid HTML?

In my header.html file I have this to get my css file.
[code]
    <link rel="stylesheet" type="text/css" href="includes/styles.css" />
[/code]

I'm stuck and need help! :)

Thanks

[nogray]

If your <link rel="stylesheet" type="text/css" href="includes/styles.css" /> in the head section of the HTML and the file name styles.css (no styles.php or anything else), it should work fine.

If you have this live somewhere, I can check it out for you.

[moberemk]

Basically, at least part of you HTML is invalid, that's what it means. Fix that before you fix your CSS.

[SharkBait]

This is the HTML that is called (require("includes/header.html")) in the line 0 of the index.php

[code]
<?php

session_start();
$sessid = session_id();
header("Cache-control: private");   // IE6 Fix for Sessions

ob_start();

$mtime = microtime();
$mtime = explode(' ', $mtime);
$mtime = $mtime[1] + $mtime[0];
$startime = $mtime;

if (!isset($page_title)) {
    $page_title = QC Test Site';
}

error_reporting(E_ALL ^ E_NOTICE);

require_once('mysql_connect.php');
require('includes/funcs.inc');
require('includes/defs.php');

   // Check User Messages via MySQL
$NEWMSGS = FALSE;

$msgqry = "SELECT * FROM messages WHERE Receipient = '{$USERNAME}'";
$mysql = mysql_query($msgqry);

$msgFound = mysql_num_rows($mysql);

$newMsgQry = "SELECT * FROM messages WHERE Receipient = '{$USERNAME}' AND Viewed = 'N'";
$NewQuery = mysql_query($newMsgQry);

$numNewMsg = mysql_num_rows($NewQuery);

if ($numNewMsg > 0) {
    $NEWMSGS = TRUE;
}

?>
<!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>

<title>
    <?php
        echo $page_title;
    ?>
</title>

    <link rel="stylesheet" type="text/css" href="includes/styles.css" />
    
    <?php
    if ($NEWMSGS && isset($USERNAME)) {
        ?>
    <script language="Javascript">
        function popUP() {
            mywindow= window.open ("newmsg.php", "mywindow","location=0,status=0,scrollbars=0,width=200,height=50");
            mywindow.moveTo(0,0);
        }
    </script>
        <?php
    }
    ?>
</head>

<body>
<?php
if (!isset($USERNAME)) {
?>
<div style="background-color: #36c; color: #fff; padding: 5px;">
    <form action="login.php" method="post" style="padding:0; margin:0;">
        Username: <input style="font-size: 90%;" type="text" name="username" size="20" value="<?php if (isset($username)) echo $username; ?>" />
        Password: <input style="font-size: 90%;" type="password" name="password" size="20" /><input style="font-size: 90%;" type="submit" name="submit" value="Login" />
    </form>
</div>
<?php
}
?>
<div id="maincontainer">
    <?php
    if(isset($USERNAME)) {
        
    ?>
    <div class="navcontainer">
        <?php
        if ($USERNAME) {
            echo "Logged In As:";
        } else {
            echo "Please Login";
        }
        ?>
        <div class="topmenu"><br />
            <?php
            if(isset($USERNAME)) {
                echo "<span class=\"username\">{$USERNAME}</span>";
            }
            ?>
            <span class="username" style="padding-left: 10px; text-align: right;">
                [ <a href="logout.php">Logout</a> ]
            </span>
            <br />&nbsp;
        </div>
    </div>
    <?php
    }
    if ($USERLEVEL == $ADMIN) {
    ?>
    <div class="navcontainer">
        Administation
        <div class="topmenu">
            <ul class="topmenu">
                <li><a href="phpMyAdmin" target="_blank">phpMyAdmin</a></li>
                <li><a href="users.php">User List</a></li>
                <!-- <li><a href="rma_dump.php">Dump RMA entries</a></li> -->
                <li> &nbsp;</li>
                <!-- <li><a href="logs.php">View Logs</a></li> -->
            </ul>
        </div>
    </div>
    <?php
    }
    if ($USERLEVEL >= $TESTER) {  
    ?>
    <div class="navcontainer">
        Testing
        <div class="topmenu">
            <ul class="topmenu">
                <li><a href="add_note.php">Add a Note</a></li>
                <li><a href="test.php">Test Units</a></li>
                <li>&nbsp;</li>
            </ul>
        </div>
    </div>
    <div class="navcontainer">
        Messages
        <div class="topmenu">
            <ul class="topmenu">
                <li><a href="messages.php?viewall">View Messages</a>
                    <span align="center" style="color:#000; text-align: center;">
                        <?php echo "<font color=\"#000000\">{$numNewMsg} [ {$msgFound} ] </font> \n"; ?>
                    </span></li>
                <li><a href="messages.php?send">Send a Message</a></li>
                <li>&nbsp;</li>
            </ul>
        </div>
    </div>
    <div style="clear:both;">&nbsp;</div>
    <?php
    }    
    ?>
    <div style="float:left; width: 150px;">
    <?php
        require('nav-left.php');
    ?>
    </div>

    <div style="float: right; width: 640px;">
                <!--  CHANGABLE CONTENT HERE -->

[/code]

Its on a private network so I can't show you it in action :)

I am missing something in my header.html file?

[SharkBait]

I figured out what it was.

In my Apache httpd.conf I have it looking for PHP in .css files

Well that would of course bugger things up. Though IE would not break, and FireFox would.

So I removed the .css extension from the httpd.conf so that it would not look for PHP and it works peachy now.

:)