How to correctly attach 'arrowed' block to the input above - forms

Question

As you can see, I got it right when the list inside my block has only one row, but it's wrong when the list is bigger.
Since I can't select only those inputs followed by errors (see here), my current solution is a negative margin-top:
.errorlist {
display: inline-block;
position: relative;
margin-left: 1em;
margin-top: -1em;
max-width: 30em;
min-width: 10em;
border-radius: 4px;
}
/* Arrow: */
.errorlist:before {
content: "";
width: 0;
height: 0;
position: absolute;
left: 10px;
bottom: 100%;
border-color: transparent transparent rgb(205, 10, 10) transparent;
border-style: solid;
border-width: 10px;
}
.errorlist li {
margin: 0;
padding: 0.5em;
}
Relevant HTML:
<div class="required">
<p>
<label for="id_username">Nombre de usuario:</label>
<input type="text" name="username" maxlength="30" id="id_username">
</p>
<ul class="errorlist ui-state-error">
<li>Este campo es obligatorio.</li>
<li>Este campo es obligatorio.</li>
</ul>
</div>
EDIT: I've noticed that only the 2nd <li> is moving the block. I can add as many as I want and the block doesn't slide updwards any more.

Answer 1

If you modify the position of ul.errorlist using the top property rather than margin-top, the li elements will stay put, and you can tweak the top
like so: http://jsfiddle.net/bqxdj/
.errorlist {
display: inline-block;
position: relative;
margin-left: 1em;
top: -1.5em;
max-width: 30em;
min-width: 10em;
border-radius: 4px;
}

Answer 2

list tags automatically adds a whitespace.
To get rid of this try:
<li>Este campo es obligatorio.</li><li>Este campo es obligatorio.</li>
or if you are safe with HTML5,
<li>Este campo es obligatorio.
<li>Este campo es obligatorio.
remove the end tag.
Hope this works.
EDIT: remove the margin-top:-1em
http://jsfiddle.net/ymSKX/