Good all the time.

My javascript adds a row in the table in which a button is added (as an image ):

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

Which I try to describe in 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; }

Immediately I will say that such a design spied on the site .
But for some reason, in my browsers, something incomprehensible happens with the button size (for example, when I opened the mode ("opera drgonfly") in opera, I saw that this is the height of the original submit button that cuts the image, and in dreamweaver - everything is normal, but the text of the “submit” button lies on the milestones of my image, i.e. In all the browser, I have some kind of garbage.

Where is the dog buried here?

PS If I describe it in html, then everything is fine:

 <?=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\';', ) )?>
  • one
    > and in dreamweaver @ Konstantin78, Dreamweaver is not a browser :) Also, why should you push a form into a table? Why don't you use inline style layout for block elements. If I'm not mistaken, you are developing a service for a limited number of users, so feel free to use flexboxes . As an option, if there are no layout skills, use the css framework. For example, Twitter Bootstrap . - romeo
  • I. Yes, I know about Dreamweaver, just there is a "Split" mode, which immediately shows a graphic result. Ii. <? = Form - just a picture is described in kohana. Iii. in one of the columns of the table, I edit the record, and in the new column, I display the "Save" button IV. About "inline style" - I'll think, thank you ... V. So what’s wrong with css? By the way, Dreamweaver also shows a graphic result - Konstantin78

2 answers 2

just there is a mode "Split"

Yes, I know. Used this product when it belonged to Macromedia

@ Konstantin78 , it’s not very clear why you use the text-indent (a la red line). Although, probably, to remove the default text. It is enough for the button to register value="" :

 <input name='save' type='submit' class='btn_save' value="">
  • Thank you, your option came up, but I have a small discrepancy. In the value value = "" It is necessary to specify the true width of the picture with spaces, otherwise the button width collapses to about half a millimeter (looked at "opera" "FireFox"). Maybe, of course, you can do something different with the width. - Konstantin78
  • @ Konstantin78, an explicit declaration of the width of the input with the picture should be sufficient. .btn_save {width: 70px; } This is indicated in your and my example. Strange behavior. It would be nice to look at the entire table with the form, or part of it on jsfiddle.net . - romeo
  • For starters, I simply tried to set a tag with a button and with the [html] [1] style and [picture] [2] [1]: dropbox.com/s/aoiva173jy6o7dw/button.html?dl=0 [2 ]: dropbox.com/s/j8ajn3oj26g5csn/save.png?dl=0 - Konstantin78
  • And in the table - everything is fine only with value = "" Class! - Konstantin78
  • one
    @ Konstantin78, list the width: 70px; . In your example, the width is not specified. <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; } See the result . - romeo

Apply style not to the class, but to the element:

 [css] input[type=submit] { ••• } [/css]

or specify (if still there will be submit with other styles):

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