Jump to content

Archived

This topic is now archived and is closed to further replies.

SharkBait

FF 1.5.0.4 Breaks CSS File

Recommended Posts

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





Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
Basically, at least part of you HTML is invalid, that's what it means. Fix that before you fix your CSS.

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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.

:)

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.