Home/ Questions/Q 6889023
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T06:06:12+00:00

In a web app I am developing, I am experiencing a difference in placement

  • 0

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

enter image description here

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0