Пролема с горизонтальным меню в Хром

[dimacat]

Приветствую ! Возникла проблема: верстаю горизонтальное меню. Должно быть такое:

В Опере и Фоксе -- всё ок. Но в Хроме у меня вышло вот что:

Теперь покажу как я делал (опущу цсс-правила для шрифта, цвета и т.д. текста):

<div class="menu">
           <ul>
               <li class="company"><a href="#">О КОМПАНИИ</a></li>
               <li class="services"><a href="#">УСЛУГИ</a></li>
               <li class="portfolio"><a href="#">ПОРТФОЛИО</a></li>
               <li class="information"><a href="#">ИНФОРМАЦИЯ</a></li>
               <li class="contacts"><a href="#">КОНТАКТЫ</a></li>
           </ul>
      </div>

CSS:

.menu ul {
	list-style-type: none;
}

.menu li {
	display: inline;
}

.company {
	padding-top: 25px;
	background: url(images/o_kompanii.jpg) top no-repeat;
}

.services {
	padding-top: 28px;
	background: url(images/uslugi.jpg) top no-repeat;
}

.portfolio {
	padding-top: 25px;
	background: url(images/potfolio.jpg) top no-repeat;
}

.information {
	padding-top: 24px;
	background: url(images/informacija.jpg) top no-repeat;
}

.contacts {
	padding-top: 24px;
	background: url(images/kontakty.jpg) top no-repeat;
}

т.е. для каждого li я устанавливаю бэкграунд-картинку, и делаю поле вверху 25пх. В Опере и Фоксе, как я и говорил, всё клёво, как и надо, а вот в Хроме -- криво (см картинку выше). Т.е. Хром ну никак не реагирует на правило padding-top в данном случае. Однако, если установить, скажем для .company правило border: 1px solid #000; то всё становится как надо, но бордер-то мне не нужен. В общем, хотелось бы почитать ваши мысли по тому, как от этого безобразия в Хром избавиться.

[swetlana]

.menu li {
	display: inline;
}

где-то здесь проблема.

Вообще, Хром правильно себя ведёт.

Устанавливать вертикальные паддинги следует блочным элементам.

Например display: inline-block или display: block;float:left решат проблему.

Второй вариант даже универсальнее.

[Gaspode]

display: block;float:left

Плавающие элементы автоматически становятся блочными, разве нет?

[swetlana]

да.

Но в данном случае именно акцент на то, что элемент должен быть блочным.

[dimacat]

Светлана, спасибо огромное, Ваш совет дал тот результат, который мне нужен был. Я воспользовался display: block; float:left. Такой вопрос: а почему криво работает с display: inline; ? Разве данное правило не предназначено как раз для того, чтобы сделать список горизонтальным ?

[SelenIT]

Разве данное правило не предназначено как раз для того, чтобы сделать список горизонтальным ?

Нет, оно предназначено для превращения элементов списка в аналог span-ов, вливающихся в обычную текстовую строку. С неизбежной потерей всех блочных свойств (напр., текст в таком элементе может переноситься на новую строку с разрывом border-ов).

Компромисс, при котором элементы выстраиваются в строку, не теряя блочных свойств — это как раз inline-block.