PHP: Form Field Heights changing when I echo an error message

Question

I am processing a form at the top of my page before the html header and all:

if ($_POST['submit']) {--the code--}

If the person enters the wrong code the following php is executed:

echo "<div class=\"container alert-message warning\"><strong>Oops!</strong> The code you entered is incorrect.</div>";

This works and the div above appears at the top of the page as it should (at the top of the body tag). However, the height of my form fields shrink to about half their original height.

I have noticed that when the warning message is echoed at the top of the body tag, all of the code from my header is also echoed just below it in the body (meta, title, scripts, stylesheets). I'm assuming this echoing of the header info probably is messing with the form.

Any thoughts on why the header info is being echoed, why the form field height is changing, and/or how to fix either?

Answer 1

At the top of my page, where I am validating the form, I wrote the following code to be executed:

$wrongcode = true;

Then further down in the body of my code I wrote:

if ($wrongcode == 'true')
   echo "<div class=\"container alert-message warning\"><strong>Oops!</strong> The code you entered is incorrect.</div>";

By controlling specifically where the alert message would appear and not just having it process and echo in the head of the document, the form field heights didn't shrink.

Thank you everyone for your comments.