[Derekovich]

Доброго времени суток!
Ребята подскажите пож-та, сижу целый день не могу разобраться.
Собственно проблема - есть два блока с разной высотой контента, и мне нужно, чтобы ссылки в этих блоках были на одинаковом уровне в любом случае. Я решил мерять позицию top, получать макс кол-во, вычислять разницу у элемента с меньшим top и прибавлять то чего не хватает до максимального значения. Все работает но! есть одно но! Стандартно у браузера стоит

body margin 8px

и высота увеличивается на 8px, я немного не понимаю как она считается? и причем тут margin вообще, ведь если я не ошибаюсь, то если элемент relative, то позиция top считается от края родителя, а это у нас div.
Заранее благодарен!!!

<ul>
    <li style="float: left; width:50px;">
        <div style="background-color: green; width: 50px;">
            <a class="test" style="display: inline-block; position: relative; top:70px;" href="#">555555</a>
        </div>
    </li>
    <li style="float: left; width:50px;">
        <div style="background-color: cadetblue; width: 50px; ">
            <a class="test" style="display: inline-block; position: relative; top:50px;" href="#">2122221</a>
        </div>
    </li>
</ul>

var topResults = [];
    $('.test').each(function(){
        topResults.push($(this).position().top);
    });
    var maxResult = Math.max.apply( Math, topResults );

    $('.test').each(function(){
        if ($(this).position().top < maxResult ) {
            $(this).css('top', $(this).position().top + (maxResult - $(this).position().top));
        }
    });