CSS и размеры кнопки

[LabaZu]

Всем привет.

Помогите, пожалуйста, со следующей проблемой...

Имеется код кнопки:

***
<form action="" id="cse-search-box">
***
<button class="Button" type="submit" name="" tabindex="" style="margin-left: -60px; margin-top: 10px; text-align:justify;">
      <span class="btn">
        <span class="t">
          Поиск
        </span>
        <span class="r">
        <span></span>  
        </span>
        <span class="l"></span>
      </span>
    </button>
***
</form>
***

К ней применены следующие стили оформления:

/* Search Form */

#cse-search-box button.Button, a.Button
{
  position:relative;
  display:inline-block;
  width: auto;
  outline:none;
  border:none;
  background:none;
  line-height:34px;
  margin:0;
  padding:0;
  overflow: visible;
  cursor: default;
  text-decoration: none !important;
}

#cse-search-box .Button .btn
{
  position: relative;
  overflow: hidden;
  display: block;
  width: auto;
  z-index: 0;
  height: 34px;
  color: #1C1C1C;
  white-space: nowrap;
  float: left;
  margin-left: 60px;
}

#cse-search-box .Button .t
{
  height:34px;
  white-space: normal;
  padding: 0 24px;
  font-family: Tahoma, Arial, Helvetica, Sans-Serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  text-align: left;
  line-height: 34px;
  text-decoration: none !important;
}

#cse-search-box .Button .active
{
  color: #F2F2F2;
}

#cse-search-box .Button .hover,  a.Button:hover
{
  color: #FBF5E5;
  text-decoration: none !important;
}

#cse-search-box .Button .active .r
{
  top: -68px;
}

#cse-search-box .Button .hover .r
{
  top: -34px;
}

#cse-search-box .Button .r
{
  display: block;
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  right: 0;
  width: 9px;
  height: 102px;
}


#cse-search-box .Button .r span
{
  display: block;
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  right: 0;
  width:411px;
  height: 102px;
}


#cse-search-box .Button .active .l
{
  top: -68px;
}

#cse-search-box .Button .hover .l
{
  top: -34px;
}

#cse-search-box .Button .l
{
  display: block;
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  left: 0;
  right: 9px;
  height: 102px;
}


#cse-search-box .Button .l, .Button .r span
{
  background-image: url('images/ButtonFind.png');
}

***

Файлик ButtonFind.png выглядит следующим образом:

Интересует изменение высоты и ширины кнопки При изменении height и width картинка кнопки обрезается, что не приемлемо ;(

[Great Rash]

Есть несколько вариантов:

1) Используйте CSS3 для стилизации. А пользователи ИЕ пусть идут лесом.

2) Упростите дизайн кнопки. Чтобы ее можно было стилизовать средствами CSS2.1

3) Используйте один из методов закругления углов из этой темы.

[psywalker]

<div class="buttonBg"><div>
<input type="button" value="Удалить" />
</div></div>

Где на class="buttonBg" и на вложенный <div> вешаеться с помощью :after , :before углы, а для ИЕ6-7 экспрешаны.

[LabaZu]

К сожалению, человека, оставившего оформление, распросить не удасться,.. но хотелось бы оставить приведённый в первом посте код... Есть ещё соображения ? Если будет совсем глухо - буду пробывать предложенные варианты (но это на крайний случай и за них спасибо )

[psywalker]

Значит растягивай свои спаны на всю ширину и высоту и делай с ними тоже самое, что я тебе выше писал.

[LabaZu]

Не вариант... Спасибо. Попробую выкрутиться.