Random styling appearing on a simple php template?
I've mostly worked with pure HTML, CSS and JS / JQuery so far, but now I'm moving on to developing a little more - enjoying it!
Having a problem with PHP file templates - using header.php, index.php and footer.php file my index outputs an extra style tag (which is empty) when my file is loaded.
Here is the code for header.php:
<html lang="en">
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.3.0/animate.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
</head>
and index.php:
<?php require("header.php");?>
<div class="mainContent">
<h1>Page header in here</h1>
<p>Paragraph in here</p>
</div>
<?php require("footer.php");?>
The extra blank style <style="text/css"></style>
appears right after my last css inclusion (main.css). Unusual behavior - which is even weirder with developer tools in chrome that pops up and when I view the source in a standard way it doesn't.
source to share
I suppose this is a Chrome deal. Check if this additional style appears under the "sources" tab. Chrome's default source view in developer tools is not strict source. FE under the source tab you can see raw angular. But under the elements the angular variables are converted to strings (or whatever). For specific answers, you must post your question on the chrome forum.
One more thing: if I were you, I would create a file like this:
<html lang="en">
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.3.0/animate.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
</head>
<body>
<?php require("template1.php");?>
<?php require("template2.php");?>
</body>
<!-- some JS inclusions -->
</html>
And template files like this:
template1:
<p>This is my template 1</p>
template2:
<b>This is another template</b>
Thus, templates are completely decoupled and replaceable. This is of course a simplified VEERY example and you should spend some time thinking about the architecture of your next website. Hello Friend!
source to share