Two things. First...
When posting code in a message, please surround that code with [noparse]
paste your code here
Without these tags, code posted in a message loses its formatting and some characters in the proportionally spaced font are hard to spot.
[/noparse] tags makes code much easier for us to read and potentially saves vertical space in the message.
If it is not convenient to type the [noparse]
[/noparse] tags, then try this instead:
At the bottom right of the message box is an orange button that says "Go Advanced".
Click that button.
The one row of command buttons in the "Quick Reply" box will be replaced with three rows of buttons.
The # symbol near the right end of the middle row inserts the [noparse]
[/noparse] tags for you.
The php symbol at the very right end inserts [noparse]
In all cases, the generic [noparse]
[/noparse] tags are far more helpful than none at all.
To see what we see, please use an ordinary browser and internet connection to access your web page. Right-click in the browser window and select "View Source" (or whatever command your browser uses). You will see the stray tags that I mentioned.
Looking at your code as isolated files instead of looking at it as a combined file (like a user sees it) gives an incomplete picture of how your site is being presented to the world.
I suggest accessing the site via a "real world" URL instead of through the eyes of your development environment to get a picture of how it is working for users (and how we see it ).
Does that make sense?
PS: SOME of the <p> tags have been removed, but even more <br /> tags remain in their place. There are a bunch of active <p> tag pairs around commented lines throughout the page (note the commented line just above the form in this screen shot). These contribute to the height of the page.