In a web app I am developing, I am experiencing a difference in placement in the DOM of elements when testing between Chrome and Firefox.
When viewing the page in Chrome, elements from the <head> tag seem to be placed in the <body>, along with a bit of whitespace. This does not appear when viewing the site in FireFox.
What could cause element missplacement like this? http://archives.wsusignpost.com
I am generating the page in PHP, pulling in data from a MySql database.
db.php is included in header.php, which is included in index.php
header.php:
<?php require('db.php'); ?>
<!DOCTYPE html>
<html>
<head>
<title>The Signpost: Archives</title>
<meta name="keywords" content="..." />
<meta name="title" content="..." />
<meta name="description" content="..." />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<a href="http://www.wsusignpost.com">
Main Signpost Website
</a>
<h1>
<img id="banner" src="..." \>
</h1>
I base myself on #Lachlan insightful answer, and expanding on that:

represent the Byte Order Mark symbol as rendered on the page. Being there 2 of them, looks like both files (main page and required one) are saved with UTF-8 with BOM, and that may cause the rendering problems (coming before the DOCTYPE).
Try saving your files as UTF without BOM in your editor and see if that solves the problem.
The first two lines of your server's response is:
<!DOCTYPE html>
<html>
Not entirely sure what that  is doing there, but I suspect your PHP require() is including something odd. Your page, when saved, completely crashes TextMate --- so something certainly isn't normal.
Related
it's been some time since I did some coding so I'm basically a newbie in updated PHP (so please bear with me).
I've created a basic draft related to new web I'm working on. I decided to include header.php file (as it's supposed be used on many other pages on that web and I don't want to code header info manually for each page).
index.php file is located in main folder, css, js and images each in a separate folder: web-folders-structure .
All seems to be working fine, but when I simulate either iPad or iPhone display - menu is not resized for those type of screens (even though css styles contain detailed specs for each case).
What it should look like:
expected result
How it looks when header.php is included:
distorted navigation
index1.php start of the code:
<?php include ("./inc/header.php"); ?>
<div id="wrap">
</div>
<!-- navigation -->
content of header.php file (located in "inc" folder):
<?php
//db start
$db = mysqli_connect("localhost", "root", "", "pokus",)
or die('Error connecting to MySQL server.');
//Set DB connection charset to utf-8
$db->set_charset("utf8");
?>
<head>
<title> EGYPTICA - svet starovekeho Egypta 2019 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="sk">
<meta name="description" content="historia starovekeho Egypta">
<meta name="keywords" content="Egypt, staroveky Egypt, stary Egypt, Egyptica, egyptica, egyptologia, knihy, starovek, mumia, faraon, pyramidy">
<meta name="copyright" content="Copyright (c) 2019 Jana Rusnakova">
<meta name="author" content="Jana Rusnakova">
<meta name="robots" content="noindex, nofollow">
<link rel="stylesheet" href="./css/menumaker.css" type="text/css" />
<link rel="stylesheet" href="./css/main-styles.css" type="text/css" />
</head>
<body>
I tried to remove include and insert meta tags directly into index1.php and that works fine on all type of displays. However once I use include (of header) - when I check small screens (tablet, mobile phone) it doesn't work properly.
Any advise as to what could cause this?
Thx
Try adding viewport meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> .
Hope it helps.
I don't think there is a problem with the inclusion of the header.php file. I would guess that the problem is with the media queries in your CSS file since the hamburger menu is not displayed and the menu items are not hidden...
When I upload project files to ftp, Items moving to between body tags which are stored between head tags. When I test it in my localhost, it's fine and there is no problem about it.
header.php file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>MEYDANOKU</title>
<link href="css/reset.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
//contents here
and there is footer.php file and it has end of the body and html tags.
footer.php file
<div id="footer1">
</div>
</body>
</html>
What is wrong with these files ? In localhost it seems perfect but when I upload to ftp, head contents moving between body tags.
site address :
http://www.meydanoku.org
You have a single space before your opening doctype tag:
<!DOCTYPE html>
delete this space:
<!DOCTYPE html>
This will fix it.
The content of head tag is not actually being placed into the body, it is just a browser (probably Google Chrome right?) bug when there is content before opening doctype tag.
Click 'view source' instead of 'inspect element' to see the actual source, rather than the browsers generated DOM
There is a space before <!DOCTYPE html> on the site. But I don't see that anything is inside body instead of head
Maybe its a stupied question but i didnt fild any answer for it,
If i have file with the html tag head tag&meta.. and I include him in all my web page, its effect the seo of the site?
I have file named "start_html.php" that have this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="bla bla.">
<meta name="keywords" content="bla bla">
<meta name="author" content="bla">
<title>bla bla</title>
<!-- CSS: -->
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<!-- JavaScript -->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
I start every page with this line: <?php include('start_html.php'); ?>
When i check for code error on w3c validator its says that i dont have those tags so the page is not coded good.
If the code from that file is not being displayed in your web page then obviously your PHP code is incorrect and that file is not being included. You need to make sure you have error reporting on and displaying all errors as this will catch this for you.
See this StackOverflow question for how to enable error reporting.
You should have these meta and title tags on all your pages, so including them from PHP is certainly not a bad idea.
However, if the W3 validator tells you these tags aren't there, you should check your output. Perhaps start by 'show source code' in your browser, and see if the tags appear there.
If you try to send your source file for validation, where you have:
<?php include('start_html.php'); ?>
Of course you will get the expected result - no tags, because the source file must be parsed and handled by PHP.
You can give a working link for validation, or copy output in your browser after execution, save the file and send it.
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.
At the moment I have a single page site (html/php) I created for someone about 2 years ago. I'm about to add an admin panel and plan on starting with html5 for it. I'm curious what I will need to do to my single page besides switching the <!doctype> to just html.
Here's a bit of my single page index.php:
<!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>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="descriptions" content="meta desc">
<meta name="keywords" content="meta, keywords">
<!--imports the main css file-->
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.form.js"></script>
</head>
<body></body>
</html>
I know first I'll change my doctype to <!doctype html> but don't I also have to remove extra properties of my link and script tags? Namely the type property?
Currently this is a simple 1 page site, so I thought it would be a great place to start.
Thanks!
That should be it. Do that and then put the URL in http://validator.w3.org/ to see what html 5 errors you have.
Also since it will not be XML I think you'll want to remove the forward slashes from the end of the meta and link tags. See Useless Code's comment below regarding the type attributes.
The validator will tell you each problem until your html 5 is valid.
The HTML 5 code would look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="meta desc">
<meta name="keywords" content="meta, keywords">
<title>Title</title>
<!--imports the main css file-->
<link rel="stylesheet" href="css/style.css" media="screen">
<script src="js/jquery.form.js"></script>
</head>
<body></body>
</html>
Some explanations:
xmlns is no longer needed. Elements in HTML5 don't need to be explicitly delcared.
I'd go with charset meta before title. Otherwise, IE users might be left in the open in front of an XSS attack. (https://code.google.com/p/doctype-mirror/wiki/ArticleUtf7)
on the second meta, the name attribute should be description, not descriptions.
there's no need for forward in html (at the end of meta, links). those were mandatory in xhtml.
when referencing link and scripts, you can choose not to mention the type attribute. It is considered redundant as the defaults will kick in (for link you would probably use css, and for script js)
If you want to find out more about HTML 5 - here are some good places to start (stuff that you can read and enjoy while at it, compared to the actual standard):
http://diveintohtml5.info/ - free e-book by Mark Pilgrim