Question

Please take a look at my fiddle. I am trying to have a input field next to a 32×32 icon. For some reason there is white space that hangs off the bottom of my div. Both the div and image should be 32x32px I’m doubtful it’s my browser but I can’t figure it out:

http://jsfiddle.net/WbhgA/1/

Here’s what I’m seeing

https://i.stack.imgur.com/pAMNR.jpg

Answer 1

Try this – http://jsfiddle.net/WbhgA/15/

.inputHolder {
    height: 32px;
    margin-right: 60px;            
}

.inputHolder input {
    border: 1px solid;
    border-radius: 6px;  
    width:100%;  
    height: 32px;
    line-height: 32px;
}

.icon {
    border: 1px solid red;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    float: right;
    margin-top: -32px;
    background: transparent url(http://icons-search.com/img/fasticon/icomic_lnx.zip/icomic_lnx-icons-32X32-web.png-32x32.png);
}