0

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

У меня 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\';',
      )
)?>
2
  • 1
    > а в dreamweaver @Konstantin78, Dreamweaver - не браузер :) Кроме того, зачем "пихать" форму в таблицу? Почему бы Вам не использовать inline стиль вёрстки для блочных элементов. Если не ошибаюсь, Вы разрабатываете сервис для ограниченного числа пользователей, поэтому смело используйте flexbox-ы. Как вариант, если нет навыков вёрстки, используйте css фреймворк. К примеру, Twitter Bootstrap.
    – romeo
    28 фев 2015 в 22:16
  • I. Да о Dreamweaver я в курсе, просто там есть режим "Split", который сразу показывает графический результат. II. <?=Form - просто в kohana так описывается картинка. III. в одной из колонок таблицы я редактирую запись, а вдругой колонке, я вывожу кнопку "Сохранить" IV. о "inline стиль" - я подумаю, спасибо... V. Так чтоже не правильно с css? Кстати Dreamweaver тоже показывает графический результат 28 фев 2015 в 22:43

2 ответа 2

1

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

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

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

<input name='save' type='submit' class='btn_save' value="">
6
  • Спасибо, ваш вариант подошел, но у меня небольшая неувязочка. В значение value=" " Нужно пробелами указать истинную ширину картинки, иначе ширина кнопки схлопывается до приблизительно пол миллиметра (смотрел в "opera" "FireFox"). Может, конечно, с шириной можно как-нибудь по-другому поступить. 1 мар 2015 в 21:18
  • @Konstantin78, явное объявление ширины input-а с картинкой должно быть достаточным. .btn_save { width: 70px; } В Вашем и моём примере это указано. Странное поведение. Неплохо было бы взглянуть на всю таблицу с формой, либо её часть на jsfiddle.net.
    – romeo
    1 мар 2015 в 21:37
  • Я для начала попробывал просто в пустом html прописать тег с кнопкой и с стилем [html][1]: и [картинокой][2] [1]: dropbox.com/s/aoiva173jy6o7dw/button.html?dl=0 [2]: dropbox.com/s/j8ajn3oj26g5csn/save.png?dl=0 2 мар 2015 в 0:02
  • И в таблице - все нормально только с value=" " Класс! 2 мар 2015 в 10:27
  • 1
    @Konstantin78, пропишите width: 70px;. В вашем пример ширина не указана. <input name='save' type='submit' class='btn_save' value=""> .btn_save { height: 25px; width: 70px; border: 0; background: url(i.imgur.com/QZ5zi4K.png); cursor: pointer; } Смотрите результат.
    – romeo
    2 мар 2015 в 20:42
1

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

[css]

input[type=submit] {
    •••
}

[/css]

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

[css]

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

[/css]

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.