CODEWITHSUNDEEP
csscross-browser
Gene Golovchinsky
Gene Golovchinsky

Reputation: 6131

Image not aligned consistently between IE, FireFox, and Safari

I have a search button following an input field, specified like this:

<div class="sidebarsection">
    <input id="queryfield" placeholder="Search previews..."> 
    <button class="search-button" onclick="runSearch()"><img  src="images/search.png" /></button>
</div>

The associated CSS is

#queryfield {
    width: 130px;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
}

.search-button {
    width: 26px;
    padding: 0px;
    vertical-align: top;
}

.search-button img {
    height: 16px;
    width: 16px;
}

In FireFox, this looks correct, like this:

FireFox

In IE, this looks wrong: the image is offset near the top:

IE

In Safari on the iPad, this is also wrong:

Safari

In Chrome, it's also not right:

enter image description here

Is there a way to make all browsers display the image as FireFox does in the above examples?

Upvotes: 3

Views: 546

Answers (2)

Michael Rader
Michael Rader

Reputation: 5957

Well the vertical-align rule is quite buggy and should probably be avoided if you want full control of the look in multiple browsers: http://reference.sitepoint.com/css/vertical-align

Why not use positioning to get what you want or resize your inner image to be the exact height and width of what you want your button to be.

Upvotes: 2

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Used to this way remove img tag and apply in background image in your button as like this 

<button class="search-button" onclick="runSearch()"></button>

Css

.search-button{
background:url('../images/search.png') no-repeat center cetner;
width: 26px;
height:26px;
}

Upvotes: 2

Related Questions