jQuery tools validator error messages position

Question

I am currently using jQuery tools validation, but the error messages position is absolute. As a result, If my form is big enough and I need to scroll down, the error messages will scroll as well.

What I want is the messages to stay at their position, which is at the top of my input fields.

This could be 100% a CSS problem but I was not able to fix it.

I have some global configuration here:

$.tools.validator.conf.lang = 'el';
$.tools.validator.conf.position = "top left";
$.tools.validator.conf.message = "<div><em/></div>";  // em element is the arrow
$.tools.validator.conf.offset = [-5, 35];
$.tools.validator.conf.errorclass = "invalid";
$.tools.validator.conf.messageClass= 'form-validation-error';

and my CSS is:

.form-validation-error {
    height:15px;
    background-color:#DC1E32;
    font-size:11px;
    border:1px solid #DC1E32;
    padding:4px 10px;
    color: #fff;
    display:none;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius: 5px;

    -moz-box-shadow:0 0 6px #ddd;
    -webkit-box-shadow:0 0 6px #ddd;
}

.form-validation-error p {
    margin:0;
}

.form-validation-error em {
  display:block;
  width:0;
  height:0;
  border:10px solid;
  border-color:#DC1E32 transparent transparent;

  position:absolute; 
  bottom:-17px;
  left:60px;
  }

I use my validator like this:

<script type="text/javascript">
  $( document ).ready( function()
  {
     $( "form" ).validator();
  } );
</script>

Please help.

Answer 1

Problem solved!

I removed this:

html, body
{
   height: 100%;
}

from my CSS. Not sure why it worked that way though.

Answer 2

Try position: fixed; That'll make it stay in place. You might have to adjust left and bottom.