Не получается оформить кнопку 'submit' в css

Рейтинг: 0Ответов: 2Опубликовано: 01.03.2015

Доброе всем время.

У меня javascript добавляет строку в таблице, в которой добавляется кнопка (в виде картинки):

<td><input name='save' type='submit' class='btn_save'></td>

Которую я пробую описывать в css:

.btn_save 
   {height: 50px; 
    width: 70px;
    margin: 0; 
    padding:0; 
    border: 0; 
    background: transparent url('save.png') no-repeat center top; 
    text-indent: -1000em; 
    cursor: pointer; 
    cursor: hand; }

Сразу скажу, что такое оформление подсмотрел на сайте.
Но почему-то у меня в разных browsers происходит что-то непонятное с размерами кнопки, (допустим, когда я открыл режим ("opera drgonfly") в opera, я увидел, что это высота первоначальной кнопки "submit" режет изображение, а в dreamweaver – как бы все нормально, но текст кнопки «submit» лежит по вех моего изображения), т.е. во всех browser у меня творится какая-то фигня.

Где тут собака зарыта?

P.S. Если я описываю ее в html, то все нормально:

<?=Form::image(
     'submit', 'picture', 
      array('src'  => 'media/Img/save.png',
         'onmouseover'   => 'this.src=\'/media/Img/save_click.png\';',
         'onmouseout'    => 'this.src=\'/media/Img/save.png\';',
      )
)?>

Ответы

▲ 1Принят

просто там есть режим "Split"

Да, я в курсе. Использовал этот продукт еще когда он принадлежал компании Macromedia

@Konstantin78, не очень понято, зачем Вы используете отступ text-indent (а-ля красная строка). Хотя, наверно, чтобы дефолтный текст убрать. Достаточно для кнопки прописать value="":

<input name='save' type='submit' class='btn_save' value="">
▲ 1

Применяйте стиль не к классу, а к элементу:

[css]

input[type=submit] {
    •••
}

[/css]

или конкретизируйте (если еще будут сабмиты с другими стилями):

[css]

input[type=submit].btn_save {
    •••
}

[/css]