I have a HTML file styled with external CSS. It works fine but when I change the HTML file to PHP (with the same code), the CSS seems not working with my PHP file.
The files are almost exactly identical, and they look like this:
<html>
<head>
<link href="css/style.css" media="all" rel="stylesheet" type="text/css"/>
<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="scripts/jqueryactions.js" type="text/javascript"></script>
<script src="scripts/mousetrail.js" type="text/javascript"></script>
</head>
<body>
<!-- content here -->
</body>
</html>
The full code of the HTML and of the CSS, and a diff between the HTML-version and the PHP-version can be found on pastebin:
Full HTML
Full CSS
diff between HTML and PHP
As you can see, the HTML and PHP code are the same. But they give different output. Please help me figure this out.
the html and php code are thesame but they give different output
This isn't entirely true. A PHP will be processed by the PHP interpreter when a HTML won't (by standard/traditional setups).
If you have PHP code in your file, it could have a syntax error which might cause things to not load properly.
With that said, the only PHP code I see is:
<?include('try.php');?>
I'm guessing this could be the problem. Try these steps in troubleshooting:
Change your code to PHP 5 compliance by adding "php" after the first '?' along with an extra space between <?php include... like so:
<?php include('try.php'); ?>
Refresh the page to see if that worked. If it did, it's a syntax issue with your version of PHP.
Comment out the PHP code to see if the PHP page will run as straight HTML.
<?php //include('try.php'); ?>
If this did the trick, there's likely an issue in the try.php file that's causing the issue.
Try those troubleshooting steps to see if that helps. And, as Alex FI points out, add a DocType to your HTML.
I hope that helps!
Related
Related: https://stackoverflow.com/a/8198408/406110
login.php file: (despite being a php file, it doesn't have php code, only html)
<html>
<head>
...
<script src="/js/less.js" type="text/javascript"></script>
<link
href="login.less"
rel="stylesheet/less"
type="text/css">
</head>
<body>...</body>
</html>
load.php file:
<?php print file_get_contents('login.php'); ?>
I would like to load the content of the file login.php using load.php. It is possible, HTML is being write correctly, but CSS/LESS is not loading:
login.less file:
body { background-color: red; }
Why?
Edit 1
I am using "Client-side Usage" to run LESS files.
Seems it is a LESS problem. But why isn't it working?
Problem solved:
Somehow, LESS was not being compiled, I changed from Client-side Usage to a compiling approach. Thank you everybody!
I think what you really want is just an include:
<?php include('login.php'); ?>
This just includes the contents of the other file (in this case login.php) into your current file.
I am new to this board and since I sadly couldn't find the answer while searching for it, I thought I should post it here :P
Enough from me, I've got the following problem:
I made a website (for practice) and tried to make a guestbook in it.
Worked out pretty well so far, yet I have one big problem. As soon as I try to get from one .php page to another .php page and include a HTML page on there, it wont load the CSS elements anymore.
When going from a .html page to a .php page and including a HTML page, it works perfectly fine.
I've also checked if the path are correct, and if this bug appears on more than just that one .php page, and yea, it made always problems in that scenario.
Here are the include and stylesheet I am using (I hope that's all you need as information)
include('gaestebuchAfterLogin.html');
<link rel="stylesheet" href="../../css/style.css" type="text/css">
Edit:
here is some more code:
<?php
session_start();
?>
<?php
if(isset($_SESSION["login"]))
{
include('gaestebuchAfterLogin.html');
}
else
{
include('gaestebuchFail.html');
}
?>
<?php
session_start();
?>
^ one PHP Element
<?php
if(!isset($_SESSION["username"]))
{
echo "Bitte erst einloggen";
exit;
}
?>
^ the second PHP Element (for example)
well, as said, the include works perfectly fine, when i haven't been on a .php page before. But if i have been on a php page before, it wont work anymore
Edit2:
sorry for posting in answers and thanks for the quick responses :P
Anyways, tried to use the absolute path now, did not work out, too
try and use absolute paths instead, change:
<link rel="stylesheet" href="../../css/style.css" type="text/css">
into:
<link rel="stylesheet" href="/css/style.css" type="text/css">
This:
<link rel="stylesheet" href="../css/style.css" type="text/css">
Or create a path variable from root using $_SERVER to get your url.
Define it and then include your php in the page.
$app_url = $_SERVER['REQUEST_SCHEME'].'://'.$_SERVER['HTTP_HOST'].dirname($_SERVER['PHP_SELF']).'/';
define("APP_URL",$app_url);
and then
<link rel="stylesheet" href="<?php echo APP_URL?>css/style.css" type="text/css">
I am wondering why php does certain things twice, instead of once, when a certain meta tag is in the html portion of the file and the file is browsed by Firefox.
The code is like this:
<? /*...normal php code, including writing record to MySQL...*/
send('dan#example.com',$subject,$body);
?>
<!DOCTYPE html><html>
<!--PROBLEM on next line-->
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<head>
<title><?= $thisPage?></title>
<link href="<?= $cssURL?>css.freedom-and-purpose.css" rel="stylesheet" type="text/css" media="screen, projection" />
<?
include $dataPath . 'data.php';
?>
The result is TWO records written the database and TWO emails sent, whenever the page is called by FIREFOX. IE and Chrome not producing the problem.
There is a lot of other code in the program, but the reason I showed the portion above is that removing the line that starts with
<META...
solves the problem.
That meta tag is in there because one of the packages I run included it in their code sample.
So, what is that meta tag causes php to double do on DB-writes? And same thing on sending email?
Chances are this is actually a request for favicon.ico being caught by your main PHP file. Putting an empty file in favicon.ico or preventing your PHP from handling that URL should do the trick
enter code hereI would suggest you go through your code in some details and check its formatting.
Phil mentioned the meta tag about which I agree with. His suggestion of <meta charset="utf-8"> would be my preference.
Secondly the line sending the email looks odd. Single quotes aren't an option in php for data replacement, so the line send('dan#example.com','$subject','$body); would result in an email with the subject "$subject" and body just "$body".
Additionally send('dan#example.com','$subject','$body); appears to be missing a quote after $body.
I would advise you to move away from short php tags for opening and closing chunks of php <? ?> and get in the habit of <?php for clarity and to ensure the server you're using processes the code correctly.
Finally, I hope include $dataPath . 'data.php'; adds a </head> and a <body> to the html, as you're currently missing those too.
Ok, I am having the weirdest problem in history. I am making a website that works perfectly in HTML, but is having some REALLY odd behaviour when rendered from PHP - despite having the EXACT SAME client source code (I literally went through it character by character).
At first I thought I'd messed up something in my 'functions.php' file that I'm including, but I don't get any errors, and when I copy&paste the contents of that file into the place where the include('functions.php'); line is, the problem disappears.
Here's my code (with some HTML removed, this is all of the PHP):
<?php
error_reporting(E_ALL);
ini_set('display_errors','1');
include 'functions.php';
$footer = file_get_contents('footer.txt');
?>
<!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>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Removed</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<link type="text/css" rel="stylesheet" href="css/jquery-ui-custom.css" />
<link type="text/css" rel="stylesheet" href="css/main.css" />
</head>
<body>
<div id="header">
<div id="headerContent">
<div id="logo">
</div>
<?php
echo trim(GetNav());
?>
</div>
</div>
<div id="content">
<?php
$NumberOfNewsItems = 2;
echo trim(GetNews($NumberOfNewsItems));
?>
</div>
<?php
echo trim($footer);
?>
</body>
</html>
The functions GetNav and GetNews grab info from the database so I'm not going to show the code from them, plus, as I mentioned earlier, if I don't include the file but instead copy it's contents to the place I make the include call then most of the whitespace disappears (there's still some where the 'echo $footer' call is.
Basically, when you look at the source code, everything looks fine. Where stuff gets incredibly strange is when you hit F12 to look at the dev tools and the elements tab shows a whole bunch of extra whitespace (surrounded by double quotes) immediately after the tag (which impacts the look of the site) as well as between the footer and content Divs (which again, impacts the look of the site).
Also in this view, all of the tags from the are below the first set of white-space and the tag is empty (eg: <head></head>).
The source code looks fine (and if I copy and paste the source code into a HTML file it works flawlessly) and I have to admit that this has me tearing my hair out.
Please help me Obi-Wan-Kenobi, you're my only hope (yes, I love Star Wars, although I wish they'd made more than three movies).
P.S. This might be mega-obvious, but I'm a .Net developer doing this for a family member in my spare time (also it's fun to learn new languages, even ones overly fond of the $ sign), so apologies in advance if I'm the world's biggest newb.
EDIT: What I see in the dev tools is this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
"
"
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Removed</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<link type="text/css" rel="stylesheet" href="css/jquery-ui-custom.css" />
<link type="text/css" rel="stylesheet" href="css/main.css" />
Etc.
EDIT2: Just to be clear, I don't care what the dev tools show, it's just that I'm getting whitespace showing where those quotes are on the actual website, other than that everything is perfect.
EDIT3: Also, the whitespace cannot be clicked on with the element selector and selecting the whitespace in the element tab does not highlight anything on the website. Deleting it in the element tab however DOES fix the website (until it is reloaded obviously), but obviously doesn't help me with my problem.
Try removing the ?> in your functions.php file and no blank rows after the code. And is the functions.php in the same directory as the main file?
And just a tip, include a footer.php instead of file_get_content :-)
I wasn't able to fix this in a way that satisfies me, but here's the workaround that I implemented:
I removed the include from the header entirely and broke up functions.php into one file per function and just included them where they needed to be called.
This alleviated my problem, although it's not ideal. Glad I don't have to use PHP on a daily basis :).
I had the same issue, on the console the source of the html looked like :
By checking the encoding some files were encoded with utf-8 with bom and some with big5. By saving those file to utf-8 ( without bom) solved the issue for me.
I have used Sublime Text 2 with the EncodingHelper from the package manager to see the current file encoding.
Hope it helps.
i wonder if i could embed js and css files above the html document scope:
<script type="text/javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" src="../../media/js/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="../../media/css/cupertino/jquery-ui.css" />
<html>
<head>
</head>
<body>
<body>
</html>
this is because i want to put them in same php file where i include all files (php, js and css). i have tried this and it seems to work. the output of the html file will be shown just like the above code, with the include rows above the html tag.
are there any hidden cons in this?
Even if it works, you shouldn't do it. This type of stuff is sloppy, and as such isn't guaranteed to work tomorrow, or in future browsers. If you don't feel the agony of this method now, you will eventually. There's no reason that you should be doing this anyway.
This isn't valid html. The best place to put the javascript would be before the body close (unless there's in-line scripts that need those scripts to be loaded). This prevents blocking as the page loads.
Will not be valid (X)HTML.
This will work in most all browsers, but that's not to say it isn't wrong. It is wrong.
It's not valid HTML, and will confuse just about everyone who comes across your code, and though I don't know what browsers could possibly fail to overcome the inherent wrongness about this style, I make no promises that it will work. In a sense, it should, but in another, it most definitely should not.
Perhaps output buffering will work in this situation? Buffer the output from your "includes" file, then grab the contents of the buffer to output later, after the <html> declaration. Something roughly like this:
In your includes.php file:
<?php
ob_start();
// here is where you output your css and js declarations
$includes = ob_get_clean();
?>
And here is your main page:
<html>
<head>
<title>Hello</title>
<?php echo $includes ?>
</head>
<body>
...
I know this is very old now, but I want to add that Google is recommending to do this in certain cases.
Take a look at this: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example
Any thoughts as to why Google is advocating improper HTML coding?