сместить вниз пункты меню

[cyklop77]

помогите пожалуйста решить проблему.

попробовал для тренировки сверстать под opera/chrome/ff в самом общем виде вот эту страницу. получилось у меня вот что

проблема в том, что пункты меню расположены выше чем нужно. если я их при помощи padding-top опускаю ниже, то выделение пункта меню зелёным при наведении курсора тоже съезжает вниз и получается некрасиво.

[like2dev]

Как мне недавно подсказали если li - сделать как inline-block. То можно будет установить vertical-align. Еще можешь сделать <a>, как блочный элемент(c паддингом) и сделать у него line-height.

Update: charset установить не помешало бы.

Edited July 21, 2011 by like2dev

[amelice]

помогите пожалуйста решить проблему.

попробовал для тренировки сверстать под opera/chrome/ff в самом общем виде вот эту страницу. получилось у меня вот что

проблема в том, что пункты меню расположены выше чем нужно. если я их при помощи padding-top опускаю ниже, то выделение пункта меню зелёным при наведении курсора тоже съезжает вниз и получается некрасиво.

#headerMenuCont a:hover {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #72C101;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    color: #FFFFFF !important;
    float: left;
    height: 26px;                     /*высоту подправила*/
    text-decoration: underline;
}

#menu li {
    cursor: pointer;
    float: left;
    font-weight: normal;
    height: 26px;                      /*высоту подправила*/
    line-height: 25px;                 /*добавила свойство line-height:25px, с учетом нижнего подчеркивания, можете сами регулировать*/
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin-bottom: 0;
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 0;
    padding-bottom: 0;                 /*убрала нижний паддинг*/
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 0;
    position: relative;
    text-decoration: none;             /*убрала underline, так как у последующего элемента <а> по умолчанию есть это свойство*/
    z-index: 10;
}

#menu li a {
    color: #FFFFFF;
    padding-top: 0;                    /*убрала нижний паддинг*/
}

Edited July 21, 2011 by cheburek

[cyklop77]

спасибо

[amelice]

спасибо

Пожалуйста

[cyklop77]

в google-chrome (12.0.742.122) обнаружил небольшую проблему. пункты меню не подсвечиваются. научите пожалуйста как победить.

и ещё, если не трудно поясните пожалуйста ситуацию. валидатор ругается на строку

<input type="text" name="str" id="search" value="поиск по сайту" onClick="document.getElementById('search').value=''" />

но с другой стороны спецификация разрешает тэгу input иметь событие onClick.

Edited July 21, 2011 by cyklop77

[Vlad]

В xhtml все атрибуты должны писаться маленькими буквами. Напишите onclick и все дела.