CSS: background image for submit button

Question

I have styled submit button with custom background image. But it shows differently on different browsers.

Almost all browsers shows it correct:

enter image description here

But on 2 it have extra height:

enter image description here

Can anyone point what wrong is with my markup?

CSS:

input[type="submit"]{
    background: url(http://dl.dropbox.com/u/17055243/icons.png) -99px 0px  no-repeat;
    width:30px;
    height:30px;
    border:none;
    float:left;
    margin:30px 0 0;
    cursor:pointer;
}

HTML:

<form>
    <input type="text" class="placeholder" value="Search" />
    <input type="submit" value="" />
</form>

Tested:

IE 8.0 good
IE 7.0 good
iPhone good
Chrome 24.0 good
Firefox 18.0.2 good
Safari 5.1 (Mac OS X 10.7.1) good
Opera 12.14 (Windows 7 32-bit) good
Safari 5.1.7 (Windows 7 32-bit) extra height
Opera 11.51 (Mac OS X 10.7.1) extra height

Live demo on jsfiddle.

The submit button is the right size. It's the input box that is wrong. Only thing I can think of is you might need to set the line-height and/or font-size. Use developer tools to see if you can find any browser specific stylesheet rules that might be getting set, that you aren't specifically overriding. — crush
– crush, Commented Feb 18, 2013 at 13:22
You may also have to explicitly say things like padding: 0; just to make sure that the browser defaults are completely out of the way. Also worth looking at would be normalize.css, just stick that before all of your custom styles. — Seer
– Seer, Commented Feb 18, 2013 at 13:23
Then you aren't doing it right. You need to style the text input - I can't be more clear. — crush
– crush, Commented Feb 18, 2013 at 13:25
@crush, oh sorry. Just read your comment not corect, so I tried on submit button, not text field. — Arthur Halma
– Arthur Halma, Commented Feb 18, 2013 at 13:34

DannyBoy · Accepted Answer · 2013-02-18 13:22:33Z

5

It looks to me the height of the textbox is different not the submit button. Try setting the height of the textbox.

answered Feb 18, 2013 at 13:22

DannyBoy

1013 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

crush Over a year ago

This is exactly what the problem is. The submit button is consistent in both images, but the text box is not. Style the text box.

THeBAckwardss · Accepted Answer · 2013-02-18 14:44:02Z

1

I see in the second search bar, the text is italic and looks slightly smaller. I think the search bar is adjusting to the text and making itself smaller, which makes the search icon appear larger.

What you probably need to do is add this to your stylesheet where the placeholder is controlled:

{font-style:normal}

answered Feb 18, 2013 at 14:44

THeBAckwardss

274 bronze badges

Comments

jjj · Accepted Answer · 2013-02-18 13:23:19Z

0

Try this. It will give a fix height to the element.

input[type="text"]{
    margin:30px 0 0;
    width:226px;
    color:#999999;
    font-size:12px;
    font-style:italic;
    border:1px solid #cccccc;
    border-right:none;
    background-color:#ededed;
    float:left;
    height:28px;
    padding-right: 7px;
    padding-left: 7px;
    line-height: 28px;
}

answered Feb 18, 2013 at 13:23

jjj

1,00510 silver badges23 bronze badges

Comments

Gunther von Goetzen Sanchez · Accepted Answer · 2014-05-21 01:52:21Z

0

Submit buttons & input textfields have different default values for borders, margins, padding, etc. First of all you have to put this to both submit buttons and textfields

margin:0;
padding: 0;
border: none;
outline: none;

answered May 21, 2014 at 1:52

Gunther von Goetzen Sanchez

1562 silver badges13 bronze badges

Collectives™ on Stack Overflow

CSS: background image for submit button

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related