Размер в процентах. Мозила отличилась.
При выставлении в #menu .menu-subList width: 100% все браузеры ведут себя хорошо, и ставят полный размер по родительскому блоку, мозила же растягивает все, опираясь на ширину экрана или еще чего там.
Как выкрутиться? И почему оно так?
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>My menu</title>
<style>
body {
margin: 0;
padding: 0;
}
#menu-full {
display: table;
width: 800px;
height: 30px;
}
#menu ul {
list-style-type: none;
margin: 0 auto;
padding: 0;
}
#menu .menu-block {
position: relative;
display:table-cell;
border: 1px solid black;
text-align: center;
}
#menu .menu-subList {
width: 100%;
overflow: hidden;
position: absolute;
top: 32px;
border: 1px solid green;
}
#menu .menu-subList :last-child a {
border-bottom: none;
}
#menu .menu-subList a {
text-decoration: none;
display: block;
width: 100%;
padding: 5px 0px ;
color: black;
border-bottom: 1px solid red;
}
</style>
</head>
<body>
<div id='menu'>
<ul id='menu-full'>
<ul class='menu-block'>
<li class='menu-tittle'> Меню 111 </li>
<ul class='menu-subList'>
<li><a href='#1'>Первый в списке</a></li>
<li><a href='#2'>Второй в списке</a></li>
<li><a href='#3'>Третий в списке</a></li>
<li><a href='#4'>Четвертый в списке</a></li>
</ul>
</ul>
<ul class='menu-block'>
<li class='menu-tittle'> Меню 222 </li>
<ul class='menu-subList'>
<li><a href='#11'>Первый в списке</a></li>
<li><a href='#22'>Второй в списке</a></li>
<li><a href='#33'>Третий в списке</a></li>
<li><a href='#44'>Четвертый в списке</a></li>
</ul>
</ul>
<ul class='menu-block'>
<li class='menu-tittle'> Меню 333 </li>
<ul class='menu-subList'>
<li><a href='#111'>Первый в списке</a></li>
<li><a href='#222'>Второй в списке</a></li>
<li><a href='#333'>Третий в списке</a></li>
<li><a href='#444'>Четвертый в списке</a></li>
</ul>
</ul>
<ul class='menu-block'>
<li class='menu-tittle'> Меню 444 </li>
<ul class='menu-subList'>
<li><a href='#1111'>Первый в списке</a></li>
<li><a href='#2222'>Второй в списке</a></li>
<li><a href='#3333'>Третий в списке</a></li>
<li><a href='#4444'>Четвертый в списке</a></li>
</ul>
</ul>
<ul class='menu-block'>
<li class='menu-tittle'> Меню 555 </li>
<ul class='menu-subList'>
<li><a href='#11111'>Первый в списке</a></li>
<li><a href='#22222'>Второй в списке</a></li>
<li><a href='#33333'>Третий в списке</a></li>
<li><a href='#44444'>Четвертый в списке</a></li>
</ul>
</ul>
</ul>
</div>
</body>
<script type='text/javascript'>
</script>
</html>
|
У вас неправильный HTML-код: элемент <ul> может содержать только <li> в качестве детей.
|
oneguy,
Спасибо, ужасная ошибка. Переверстал. Но мозила все так же вредничает.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>My menu</title>
<style>
body {
margin: 0;
padding: 0;
}
#menu-full {
display: table;
width: 800px;
height: 30px;
}
#menu ul {
list-style-type: none;
margin: 0 auto;
padding: 0;
}
#menu li {
margin: 0;
padding: 0;
}
#menu .menu-block {
position: relative;
display:table-cell;
border: 1px solid black;
text-align: center;
}
#menu .menu-subList {
width: 100%;
overflow: hidden;
position: absolute;
top: 32px;
border: 1px solid green;
}
#menu .menu-subList :last-child a {
border-bottom: none;
}
#menu .menu-subList a {
text-decoration: none;
display: block;
width: 100%;
padding: 5px 0px ;
color: black;
border-bottom: 1px solid red;
}
</style>
</head>
<body>
<div id='menu'>
<ul id='menu-full'>
<li class='menu-block'> Меню 111
<ul class='menu-subList'>
<li><a href='#1'>Первый в списке</a></li>
<li><a href='#2'>Второй в списке</a></li>
<li><a href='#3'>Третий в списке</a></li>
<li><a href='#4'>Четвертый в списке</a></li>
</ul>
</li>
<li class='menu-block'> Меню 222
<ul class='menu-subList'>
<li><a href='#11'>Первый в списке</a></li>
<li><a href='#22'>Второй в списке</a></li>
<li><a href='#33'>Третий в списке</a></li>
<li><a href='#44'>Четвертый в списке</a></li>
</ul>
</li>
<li class='menu-block'>Меню 333
<ul class='menu-subList'>
<li><a href='#111'>Первый в списке</a></li>
<li><a href='#222'>Второй в списке</a></li>
<li><a href='#333'>Третий в списке</a></li>
<li><a href='#444'>Четвертый в списке</a></li>
</ul>
</li>
<li class='menu-block'> Меню 444
<ul class='menu-subList'>
<li><a href='#1111'>Первый в списке</a></li>
<li><a href='#2222'>Второй в списке</a></li>
<li><a href='#3333'>Третий в списке</a></li>
<li><a href='#4444'>Четвертый в списке</a></li>
</ul>
</li>
<li class='menu-block'>Меню 555
<ul class='menu-subList'>
<li><a href='#11111'>Первый в списке</a></li>
<li><a href='#22222'>Второй в списке</a></li>
<li><a href='#33333'>Третий в списке</a></li>
<li><a href='#44444'>Четвертый в списке</a></li>
</ul>
</li>
</ul>
</div>
</body>
|
#menu .menu-subList {
border: 1px solid green;
overflow: hidden;
position: absolute; /*вот это не лишнее?*/
top: 32px;
width: 100%;
}
|
Serg_pnz,
Действительно, без него заработало. Но ведь мне нужно position: absolute, чтоб этот элемент не сдвигал остальные. |
Посмотри тут меню http://sro001.jcase.ru/
|
Проблема была из-за display:table-cell;.
Это баг мозилы. Стек оверфлоу, оказывается, кишит этой темой. Эх. Жаль, табличкой все так красиво делалось. |
есть ещё display: inline-block
|
bes,
Так ведь не растягивает свои ячейки так красиво по ширине род. блока как табличка. ну да ладно. Не так пока и важно. |
Цитата:
|
Seva1986,
Удобная и ничем не мешающая вещь "ниочем" только из-за того, что мозила ее не поддерживает? И, кажись, таки баг. Точно уже не помню, но на стековерфлоу позиционировалось в основном так. |
| Часовой пояс GMT +3, время: 04:05. |