нестандартное поведение списков

Помогите решить проблему. Не понимаю причины неправильного отображения списков, потому что иногда они отображаются правильно, а бывает, что после обновления страницы отображаются криво, последний элемент списка иногда падает вниз. это происходит на сайте Life-magazine.ru в шапке (список изображений соц сетей)

css:
.social {
float: right;
margin: 10px -10px 0 0;
max-height: 25px;
overflow: hidden;
}
.social ul {
margin: 0;
list-style: none;
display: inline;
}
.social ul li {
display: inline;
margin: 0 0 0 0.2%;
}

.social ul.phone {
display: inline;
margin: 0;
}

.social ul.phone li {
display: inline;
margin: 0 1% 0 0;
}

.social ul.icons {
display: inline;
}

.social ul li a:hover {
}

html:
<div class="social">
<ul>
<li>
<ul class="phone">
<li>
<a href="/contacts/"><img src="/media/img/phone1.png" /></a>
</li>
<li>
<a href="/contacts/"><img src="/media/img/phone2.png" /></a>
</li>
</ul>
</li>
<li>
<ul class="icons">
<li>
<a href="/contacts/"><img src="/media/img/email.png" /></a>
</li>
<li>
<a href="/contacts/"><img src="/media/img/mail.png" /></a>
</li>
<li>
<a href="https://vk.com/read.life"><img src="/media/img/vk.png" /></a>
</li>
<li>
<a href="https://www.instagram.com/life.sochi/"><img src="/media/img/insta.png" /></a>
</li>
<li>
<a href="https://issuu.com/life-magazine"><img src="/media/img/issuu.png" /></a>
</li>
</ul>
</li>
</ul>
</div>

0

Надо бы весь код перелопатить... Есть сильное подозрение, что виной всему float... Например при загрузке страницы видно, что на месте логотипа появляется слоган, так и задумано? А для списка не рекомендовал бы использовать display:inline, display:inline-block было бы лучше...

0

Спасибо, за ответ ) слоган появляется, из-за того, что подвал грузится быстрее шапки, по-ходу...
а код наверное перелопатить придется... .делал на основе шаблона... теперь все перепроверять надо...

0