| |
|
|
| | Здравствуйте, программисты!
Есть такой код:
<html>
<head>
<style>
body {
margin:50px;
background-color:#bbbbee;
}
ul.menu {
display:block;
height:500px;
border:1px solid #000;
padding:0px;
background-color:#ffffff;
}
ul.menu .menulink {
position:relative;
float:left;
margin-top:0px;
margin-right:2px;
width:152px;
list-style:none;
display:block;
color:#000033;
text-align:center;
background:url('./fon.gif');
border:1px solid #7777cc;
font:11px Verdana,Arial;
font-weight:bold;
}
ul.menu .second {
border:0px solid;
margin:0px;
}
ul.menu .second li {
position:relative;
list-style:none;
width:150px;
color:#000033;
text-align:center;
background-color:#aaaaee;
border:1px solid #7777cc;
font:11px Verdana,Arial;
padding:0px;
margin:0px;
}
ul.menu a {
display:block;
padding:5px 7px 7px;
color:#000;
text-decoration:none;
}
ul.menu .second a {
padding:3px 7px 5px;
}
</style>
</head>
<body>
<ul id="menu" class="menu">
<li class="menulink"><a href="#">Новости</a>
<ul class="second">
<li><a href="#">Подменю 1</a></li>
<li><a href="#">Подменю 2</a></li>
<li><a href="#">Подменю 3</a></li>
<li><a href="#">Подменю 4</a></li>
<li><a href="#">Подменю 5</a></li>
</ul>
</li>
<li class="menulink"><a href="#">Меню 2</a></li>
</ul>
</body>
</html>
|
Как убрать расстояние под прямоугольниками между элементами подменю 1, 2, 3 и т.д...? Расстояние появляется в IE, в остальных браузерах расстояния нет.
P.S.: *Буду прыгать от счастья, если узнаю в чём была загвоздка.* | |
| |
|
|
| |
|
|
| |
для: SilentChild
(17.05.2011 в 20:44)
| | | можно так
ul.menu .second a {
padding:3px 7px 5px;
display:inline;
line-height:2;
}
|
в общем проблема именно в этих ссылках | |
| |
|
|
| |
|
|
| |
для: parczynski
(17.05.2011 в 21:00)
| | | Огромное спасибо! Выручили. =) | |
| |
|
|
| |
|
|
| |
для: SilentChild
(17.05.2011 в 21:31)
| | | С display:inline возникло много проблем относительно форматирования других элементов.
Я сделал так:
ul.menu .second li {
clear:left;
}
|
и тогда все встает на свои места и в блоке
ничего не нужно редактировать. От незнания такого простого свойства CSS я мучался очень долго над форматированием побочных "перекосов", возникающих в результате использования display:inline, в данном случае, думаю, удобнее использовать clear:left. Перекосы, в частности, были связаны с отображением границ блока <a> в блоке <li>. Границы блока <a> я не смог "прилепить" к стенкам блока <li> так, чтобы прямоугольник <a> вплотную прилегал к блоку <li> внутри последнего. | |
| |
|
|
