Input не работает по краям

[Modestes]

Не работает кнопка если нажать по бокам. Если по тексту то работает

Вот скрин. На скрине видно что есть отступы в 20px, из-за них как раз таки и не работает

вот код

<div><a class="post" href="#"><input type="submit" name="new_answer_btn" id="new_answer_btn" value="Отправить"/><em></em></a></div>

и стили

.new-answer .post, .new-private-answer .post {
  position: relative;
  display: inline-block;
  margin-top: 20px;
  padding: 0 20px;
  height: 27px;
  background: url(/design/main/images/btnbg.png) -12px 0 no-repeat;
  color: #fff;
  text-decoration: none;
  line-height: 26px;
  font-weight: bold;
  font-size: 1.167em;
}

.new-answer .post em, .new-private-answer .post em {
  position: absolute;
  top: 0;
  left: -12px;
  margin-left: 100%;
  width: 12px;
  height: 27px;
  background: url(/design/main/images/btnbg.png);
}
.new-answer .post input, .new-private-answer .post input {
  padding: 0;
  border: none;
  background: none;
  color: #fff;
  font-weight: bold;
  font-size: 1em;
  cursor: pointer;
}

изображение для кнопки вот такое

Если убрать у ссылки внутренний отступ padding: 0 20px; то кнопка работает, но справа остается кусок скругленного изображения и естественно если нажать в это место то не пашет.

Вопрос: Как сделать кнопку рабочей сохранив при этом скругление и растягивание т.к на сайте текст для кнопок разной длины.?

Edited April 25, 2012 by Modestes

[Great Rash]

<button type="submit">
  <span>
    <span>
      текст
    </span>
  </span>
</button>

Всю стилизацию делать в спанах.

[SelenIT]

И забыть про вкладывание одних интерактивностей в другие (как <input type="submit"> в ссылку в первом примере). Помимо невалидности, это бред с точки зрения элементарной логики: когда браузер заставляют разрываться и выполнять взаимоисключающие команды — добра не жди.

[Modestes]

И забыть про вкладывание одних интерактивностей в другие (как <input type="submit"> в ссылку в первом примере). Помимо невалидности, это бред с точки зрения элементарной логики: когда браузер заставляют разрываться и выполнять взаимоисключающие команды — добра не жди.

спасибо! код не мой, а студии.

[SelenIT]

Необученность студии хорошим манерам не избавляет от отвественности

[Modestes]

Сделал по похожему принципу. Все бы хорошо но вот отступ убрать не получается.

на скрине видно, справа отдельная картинка торчит где то на 2px, как его можно убрать?

Торчит из-за отступа текста, если его подправить то снизу урезается левое изображение.

Высота у изображений одинаковая

button.post {
  display: block;
  float: left;
  font: bold 12px arial, sans-serif;
  color: #fff;
  text-decoration: none;
  background: url(/design/main/images/bgr.png) top right no-repeat;
  padding-right: 10px;
  outline: none;
}
button.post span {
  display: block;
  line-height: 13px;
  background: url(/design/main/images/bgl.png) no-repeat;
  padding: 7px 0 13px 23px;
}

<button name="new_answer_btn" id="new_answer_btn" type="submit" class="post" onclick="this.blur();"><span>Кнопка</span></button>

Edited April 25, 2012 by Modestes

[Modestes]

Сделал сам, прописал position:relative; в 1 px