Why is only firefox behaving like I want it to when using PHP?

Question

SOLVED: EDITED TO ENCODING -> ENCODE WITH UTF-8 WITHOUT BOM.

Before I started coding php on my site it all looked fine on all browsers. So I made the common beginners mistake to just code all my php stuff in mozilla firefox... and now everything is a mess.

If I remove all the php code everything is back to normal again, but that's not a solution.

In Firefox:

Everything looks the way it should, it's all perfect.

In Google Chrome:

• A margin between the top and the navigation div(position:fixed) has appeared.

• The content with posts has ran over the footer

In Safari:

• A margin between the top and the navigation div(position:fixed) has appeared.

• The content with posts has ran over the footer

And in the worst of them all IE:

• The navigation div is no longer acting like position: fixed

• Youtube div is on the bottom of the page

• Text is bolder

• height has been added on some divs

• The jquery slider is not working and there is like a margin-top and bottom on it

Why is the difference so big between the browsers? Any good explanations? This is very frustrating as I was just about to finish the job.

Answer 1

The error is in the HTML that your PHP script outputs, rather than the PHP itself. So i'd look in the outputted source code of your web page and see what's being generated and how it differs from your flat HTML site you had before. The problem is likely missing/broken tags, so run the whole thing (the PHP outputted HTML source code) through the W3C validator and you'll likely spot what part of your PHP script is giving you bad/broken HTML.