Clever Geek Handbook

Chrome loads PHP file content into CSS file

My site loads fine in Firefox, but the CSS disappears completely in Chrome (although the html is loading).

According to the console, it looks like Chrome is loading the content of index.php in main.css and bannerTest.css like so:

main.css loading incorrectly

In Firefox, however, it loads the CSS as expected: enter image description here

Things I've tried that didn't work:

  • clearing my history / cache / cookies
  • adding text / css to tags. This all made the text a little weird in Firefox.
  • css and html validation. I fixed all the half-columns, etc. Still not working.

What's the problem? I can't even figure out what steps to take to investigate what's going on more deeply, let alone the problem itself. As far as I know, no errors are printed to the console.

Here is index.php:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Study</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<link href="css/bannerTest.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>

<style>
/**
 * The banner assumes a margin of 0px, but is not included
 * in banner.css to avoid collisions with other themes and 
 * admin bars.
 */
body {
  margin:0px;
}
</style>

<link rel="icon" type="image/ico" href="favicon.ico">

</head>

<body>
<?php

//Connect to MySQL database.
$host = "127.0.0.1";
$user = "root";
$password = "password";
$database = "database";

$r = mysql_connect($host, $user, $password);

if (!$r) {
    echo "Could not connect to server.\n";
    trigger_error(mysql_error(), E_USER_ERROR);
}

$query = "CREATE DATABASE IF NOT EXISTS " . $database;

mysql_query($query);

@mysql_select_db($database) or die("Unable to select database.");

$query="CREATE TABLE IF NOT EXISTS `groupcodes` (`groupcode` int(10) PRIMARY KEY, `usercode` int(10))";

mysql_query($query);

$userid = "";

?>

<div id="banner">
<div id="u-header-container">
<div class="container">
  <div class="row-fluid">
    <div id="home-link-container">
      <a id="home-link" href="http://csue.edu/">
        <span id="wordmark">U</span>
        <span id="university">UNIVERSITY</span>
      </a>
    </div>
  </div>  
</div>  
</div>
<div id="database-container">
    <header>
        <a href="index.php">
        <h4 id="logo">Computing Systems</h4>
        <h1 id="study_logo">Study</h1>
        </a>
    </header>
<div id="study">

    <form method="post" id="consent-form" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">

        <div class="wide-column">
            <p>
            By clicking the 'Acccept' button below, you hereby acknowledge the following:
            </p>

            <p>
            I am 18 years of age or older, live in the United States, and have a Google Drive or Dropbox account. 
            I have read this form and decided that I will participate in the project described above. 
            Its general purposes, the particulars of involvement, and possible risks and inconveniences have 
            been explained to my satisfaction. I understand that I can withdraw at any time.
            </p> 
        </div>
    <input type="text" name="email_input">
    <br>
    <input type="submit" value="Begin Study">
    </form>

</div>
</div>

</div>

</body>
</html>
+3


source to share


1 answer


You have misidentified the problem. This involves visiting different URLs to download the HTML document and then using different browsers. You just switched the browser at the same time as the URL switching.

Take a look at the URL that loads in your first image:

http://localhost/peergroup/index.php/css/main.css


In Chrome you must be visiting http://localhost/peergroup/index.php/

, and in Firefox you are visiting http://localhost/peergroup/index.php

(without /

at the end).

This results in relative URLs being computed differently.

A workaround is to use URLs that are relative to the site root (i.e. starting at /

).

+1


source






More articles:


All Articles