The other answer given here does address your problem, though it's a bit of a one-off solution, and could prove to be a hassle to apply if you continue to encounter this problem in the future. (To be honest, I'm generally not a fan of inline styles, since they blur the lines between presentation and content.)
The problem actually lies with the <textarea>
located just above the error message. If you take a look at them with web developer tools, you'll notice on the working on, there is a margin-bottom
of 20px applied to it - not so with the one that isn't working. This margin is the result of styling applied to .slickwrap input, textarea, select
in "slickform-standalone.css". Without this margin-bottom
, the error message appears closer to the bottom of the <textarea>
, causing it to appear "too high".
This is due to your inclusion of "bootstrap.css" in the second webpage. The default styles applied to a <textarea>
in the BootStrap framework include margin:0
, overwriting the margin-bottom
of 20px from earlier.
So, how to address this? An easy, and probably best solution would be to pull out "bootstrap.css" from the second page. Since you don't have it on both pages, I'm going to assume it isn't fundamental to the design of the website. If you do need specific styles from it for a particular element on that webpage, isolate those styles and only include them. It's not a good idea to include an entire CSS framework on a webpage for just a few elements, since it's a lot of extra stuff to send to the client, and unexpected styles (such as the one you're seeing here) are bound to cause issues.
If you're really set on keeping "bootstrap.css" in there, though, you can simply apply a style to the class on both <textarea>
elements (or just modify its existing definition):
.largertextarea{
margin-bottom: 20px;
}
This will override the BootStrap style that is causing the issues, so your <textarea>
elements will continue to have the 20px below them, and will push down the error message consistently.
Hope this helps! Let me know if you have any questions.
EDIT: Don't forget to remove the negative margin-bottom
applied inline to your error message, or your error messaging will still appear off.