Не могу изменить высоту кнопки поиска

Тема в разделе "CSS, HTML, Web 2.0, верстка по web-стандартам", создана пользователем Yura2010, 18.07.2010.

  1. Offline

    Yura2010 Недавно здесь

    Регистрация:
    12.03.2010
    Сообщения:
    37
    Симпатии:
    0
    Пол:
    Мужской
    В форме поиска высота сама кнопка меньше по высоте, чем поле searchword (см. вложение)
    В css прописано следующее:
    #search {margin-top:30px;}
    #search form{padding:-10px 0 0 0; margin:0;}
    #search form .inputbox {width:127px; height:13px; background:#4c4f58; border:none; color:#FFFFFF; font-weight:normal; font-size:9px; margin:0;}
    #search form .button { width:40px; height:13px; background:#4c4f58; border:none; color:#FFFFFF; font-size:9px; font-weight:normal; margin:0 0 0 1px;}
    Сам html:
    <div class="search">
    <input name="searchword" id="mod_search_searchword" maxlength="20" alt="ПОИСК" class="inputbox" type="text" size="10" value="поиск" onblur="if(this.value=='') this.value='поиск';" onfocus="if(this.value=='поиск') this.value='';" /><input type="submit" value="ПОИСК" class="button" onclick="this.form.searchword.focus();"/> </div>

    <input type="hidden" name="task" value="search" />
    <input type="hidden" name="option" value="com_search" />
    <input type="hidden" name="Itemid" value="1" />
    </form></div>

    Как сделать кнопку той же высоты, что и поле inputbox?
     

    Вложения:

    • but.png
      but.png
      Размер файла:
      2.4 КБ
      Просмотров:
      1
  2.  
  3. doctorgrif
    Offline

    doctorgrif специалист

    Регистрация:
    14.01.2008
    Сообщения:
    1 284
    Симпатии:
    66
    Пол:
    Мужской
    вместо
    Код (CODE):
    1. #search form .button {
    2.  width:40px;
    3.  height:13px;
    4.  background:#4c4f58;
    5.  border:none;
    6.  color:#FFFFFF;
    7.  font-size:9px;
    8.  font-weight:normal;
    9.  margin:0 0 0 1px;}

    написать
    Код (CODE):
    1. #search form .button {
    2.  width:40px;
    3.  height:13px;
    4.  background:#4c4f58;
    5.  border:none;
    6.  color:#FFFFFF;
    7.  font-size:9px;
    8.  font-weight:normal;
    9.  margin:0;}
     
  4. Offline

    Yura2010 Недавно здесь

    Регистрация:
    12.03.2010
    Сообщения:
    37
    Симпатии:
    0
    Пол:
    Мужской
    doctorgrif,
    В таком случае высота кнопки остается такой же, и плюс еще исчезает расстояние между кнопкой и полем inputbox
     
  5. doctorgrif
    Offline

    doctorgrif специалист

    Регистрация:
    14.01.2008
    Сообщения:
    1 284
    Симпатии:
    66
    Пол:
    Мужской
    тьфу :), точно (T-R-B-L) - мой косяк, отвлекся
    тогда, как вариант, пробовать увеличивать высоту поиска до 14-15 px
    Код (CODE):
    1. #search form .button {
    2.  width:40px;
    3.  height:13px;

    будет
    Код (CODE):
    1. #search form .button {
    2.  width:40px;
    3.  height:14px;
     
  6. Offline

    Yura2010 Недавно здесь

    Регистрация:
    12.03.2010
    Сообщения:
    37
    Симпатии:
    0
    Пол:
    Мужской
    doctorgrif,
    пробовал уже. В ИЕ8 вообще никаких изменений, а в мозиле высота кнопки чуть увеличивается, но кнопка чуть выше становится (см. вложение):
     

    Вложения:

    • but.png
      but.png
      Размер файла:
      1.5 КБ
      Просмотров:
      1
  7. doctorgrif
    Offline

    doctorgrif специалист

    Регистрация:
    14.01.2008
    Сообщения:
    1 284
    Симпатии:
    66
    Пол:
    Мужской
    чтоб нивелировать смещение задай кнопке
    Код (CODE):
    1. margin-top:n;

    где n - то количество пикселей, которое ты прибавил к 13px исходных
     
  8. Offline

    Yura2010 Недавно здесь

    Регистрация:
    12.03.2010
    Сообщения:
    37
    Симпатии:
    0
    Пол:
    Мужской
    Пробовал так делать. Что самое интересное - на это количество пикселей увеличивается расстояние между всей формой поиска и заголовком "Поиск по сайту", а положение кнопки относительно инпута остается таким же
     

Поделиться этой страницей

Загрузка...