4

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.

Arthur Halma
  • 3,943
  • 3
  • 23
  • 44
  • On Opera 12.14, Windows XP, it works perfectly. – Andrea Ligios Feb 18 '13 at 13:18
  • 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 Feb 18 '13 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 Feb 18 '13 at 13:23
  • Then you aren't doing it right. You need to style the text input - I can't be more clear. – crush Feb 18 '13 at 13:25
  • @crush, oh sorry. Just read your comment not corect, so I tried on submit button, not text field. – Arthur Halma Feb 18 '13 at 13:34

4 Answers4

5

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

DannyBoy
  • 101
  • 3
  • 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. – crush Feb 18 '13 at 13:27
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}
THeBAckwardss
  • 27
  • 4
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;
}
jjj
  • 965
  • 8
  • 23
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;
Gunther von Goetzen Sanchez
  • 156
  • 2
  • 13