Один блочный элемент наезжает на другой

[Serg79]

Из названия трудно понять что имею ввиду, вот картинка:

Как сделать так что бы список "<li>" не наезжал на таблицу.

Код HTML:

Код:

<div class="menu">
<ul>
<li>Пользователи</li>
<li>Группы</li>
<li>Закладка</li>
</ul>
</div>

<div class="topic"><table width="100%" cellspacing="0" cellpadding="6" border="0">
<tr>
<td class="tcapt">Пользователь</td>
<td class="tcapt">Полное имя</td>
<td class="tcapt">Группа</td>
</tr>
<tr>
<td class="tbox">admin</td>
<td class="tbox">Admin</td>
<td class="tbox">Users</td>
</tr>
</table></div>

Код CSS:

Код:

div.menu {font-weight: bold; margin: 0; padding: 0;}
div.menu ul {margin: 0; padding: 0;}
div.menu li {
  list-style-type: none; display: inline; background-color: green;
  margin: 0; padding: 4px;
}

div.topic .tcapt {background-color: #435370; color: white; font-weight: bold;}

[RXL]

Serg79, попробуй в FF в контекстном меню - "Проверить элемент" (он же DOM Inspector). Там посмотри "CSS Rules" и "Computed Style". Во втором можно понять текущее значение стилей, а в первом - откуда оно взялось.

[Serg79]

Как раз вот на это значение 'padding: 4px;' и накладывается.

[RXL]

Бррр...
А как у тебя li за пределы div вылезает? Из-за inline? Но тогда он должен быть внутри блока div.

[Serg79]

Serg79, попробуй в FF в контекстном меню - "Проверить элемент" (он же DOM Inspector). Там посмотри "CSS Rules" и "Computed Style". Во втором можно понять текущее значение стилей, а в первом - откуда оно взялось.

Вот что показывает FF:

[Serg79]

Исправил добавлением 'padding' в 'ul':

Код:

div.menu ul {margin: 0; padding: 4px;}

Получилось вот так:

[RXL]

Serg79, а если объявить ul { display: block; } ? Это было бы логичнее.

[Serg79]

Serg79, а если объявить ul { display: block; } ? Это было бы логичнее.

Пробовал, не помогло.

[RXL]

А после этого шаманства стоит проверить в ряде браузеров...

[Serg79]

А после этого шаманства стоит проверить в ряде браузеров...

Проверил в FF,  Chrome и IE8, все отлично работает. И что самое интересное, если сделать обратно 'padding: 0' то все они отображают с наездом блок '<li>' именно на 4px.

[baldr]

Вместо padding поставь margin ?

[Sla]

baldr, нельзя, тогда фона не будет, появится дырка
можно совместить margin-bottom и padding (не пробовал)

[Serg79]

baldr, нельзя, тогда фона не будет, появится дырка
можно совместить margin-bottom и padding (не пробовал)

А зачем Sla, вводить дополнительные непонятнки. Так мы точно знаем что 'margin: 0' и задаем границы с помощью 'padding'.

[Serg79]

А так никакой разницы не должно быть. 'ul' будет расширять себе место с помощью 'margin' а 'li' будет раздвигать свои границы с помощью 'padding'.