Странные отступы в верхнем меню. Как их убрать?

Question

[FX-Mercury]

#top-nav {
	width:100%;
}

#top-nav-link {
	text-transform:uppercase;
	font:bold 12px/18px Tahoma, Arial, Helvetica, sans-serif; 
    padding:0;
    margin:auto;
    display:table;
    width: 100%; 
}

#top-nav-link li {
	display:table-cell;
	background:#f4f4ec;
	border-bottom:5px solid #8eb132;		
}

#top-nav-link li a {
	display:table-cell;
	color:#44494f;
	padding:10px 15px 10px 15px;

}

#top-nav-link-sep {
	border-left:1px solid #e1e1d3; 
}

#top-nav-link li a:hover {
	color:#75902d;
	background:#C42B2D;
}

<ul id="top-nav-link">
       <li><a href="doc/news" onclick="Load('news'); return false;">Новости</a></li>
       <li><a id="top-nav-link-sep" href="doc/library" onclick="Load('library'); return false;">Библиотека</a></li>
       <li><a id="top-nav-link-sep" href="doc/contacts" onclick="Load('contacts'); return false;">Контакты</a></li>
       <li><a id="top-nav-link-sep" href="doc/" onclick="return false;">Отдых</a></li>
       <li><a id="top-nav-link-sep" href="doc/history" onclick="Load('history'); return false;">История</a></li>
       <li><a id="top-nav-link-sep" href="doc/cllagr" onclick="Load('cllagr'); return false;">Коллективный договор</a></li>
       <li><a id="top-nav-link-sep" href="doc/safety" onclick="Load('safety'); return false;">Безопасность труда</a></li>
       <li><a id="top-nav-link-sep" href="doc/photos" onclick="Load('photos'); return false;">Фотогалерея</a></li>  
      </ul> 
   </div>

В меню есть отступы, текст не ровно по центру это видно при наведение курсора и так видно. Тыкал тыкал, так и не понял как их убрать. Мне нужно растянуть меню по ширине.

Answer 1

[Влад Базаров]

Можете попробовать вставить вот это в самом начале.

* {
	margin:0;
	padding:0;
}

Safari
Chrome

Comments

[FX-Mercury]

стили у меня сброшены.

[Влад Базаров]

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

[FX-Mercury]

vlad1337: все нормально

[Влад Базаров]

FX-Mercury: Ещё раз проверьте * {
margin:0;
padding:0;
}
Может точку поставили.

[Влад Базаров]

FX-Mercury: У меня без отступов заработало.

[Влад Базаров]

FX-Mercury: По умолчанию браузер даёт эту полосу.

[FX-Mercury]

vlad1337: у меня ничего не робит (((

[FX-Mercury]

vlad1337: Куда -нибудь сайт можно залить, что бы получше на него можно было вам посмотреть ?

[FX-Mercury]

мне текст нужно по середине выровнить, по середине между полосок

[Влад Базаров]

Киньте файл. Прикрепите к вопросу архив, я сейчас скачаю.

[FX-Mercury]

vlad1337: что то я не понял как это сделать

[Влад Базаров]

FX-Mercury: а, тут это видимо нельзя сделать. Киньте тогда на файлообменник какой-нибудь. Типа ex.ua

[FX-Mercury]

вот www.ex.ua/597387476693

[Влад Базаров]

FX-Mercury: вы будете смеяться, однако у меня всё в порядке) Попробуйте другой браузер. Фото приложу выше. Я попробовал через Safari и Chrome. Думаю, проблема отсутсвует, но это что-то с вашим браузером.

[Влад Базаров]

FX-Mercury: FX-Mercury: попробуйте зайти на hostinger и выложить там сайт. Потом зайти с мобильного или другого устройства. И увидите есть проблема или нет.

[FX-Mercury]

у вас так же как и у меня. мне так кажется. текст не симметричен. он ближе к левому краю и дальше от правого, он не посередине ячейки. смотрите на полоски по бокам. можно и так оставить, но мне этот баг глаза колит

Answer 2

[Евгений Петров]

1. Зачем вы используете для ссылок модель ячейки?
2. Недопустимы одинаковые значения атрибута id.
3. Зачем вы используете атрибуты событий и смешиваете визуализацию и функциональность?

jsfiddle.net/ftyauez9

Comments

[FX-Mercury]

неопытный, исправлюсь. спасибо за помощь

Answer 3

[Роман]

Мы все в матрице и видим вашу страницу по коду

Во-первых, не используйте id. Матчасть читали? Наверно нет, т.к. айдишни уникальный и нельзя его задавать больше чем для 1 элемента.
Для выравнивания по центру текста используйте text-align: center;

Comments

[FX-Mercury]

text-align: center; - не работает. сделаю id="top-nav-link-sep" классом.

[Роман]

FX-Mercury: вам выравнивание по горизонтали же? к какому элементу применили?

[FX-Mercury]

Роман: да по горизонтали. ко всем элементам пытался и ничего не получилось

[Антон Мудренок]

FX-Mercury: а у вашего div вокруг меню, случайно, лишние стили не заданы?

[FX-Mercury]

Антон Мудренок: только width:100%;

[FX-Mercury]

Антон Мудренок: Куда -нибудь сайт можно залить, что бы получше на него можно было вам посмотреть ?

[Антон Мудренок]

FX-Mercury: можете нажать в браузере F12, найти в HTML блок который покрывает ваши ненужные отступы, выделить его, и показать нам все стили которые к нему относятся

[FX-Mercury]

Тег дает отступ

[FX-Mercury]

тег а дате отступ