Question

Following is my HTML for submit button :

<div id="header">
     <table>
        <tr>
            <td><h1></h1></td>
            <td><input type="text" name="search" class="search"/>
             <input type="submit" class="search-btn" name="submit" value="Search"/></td>                        
        </tr>
      </table>
</div>

And following is my CSS :

#header table td .search-btn{width: 60px; margin-left: 5px;                                                          
                             border: 1px solid #D5EA3B;
                             padding: 9px;
                             display: inline-block;
}

The issue is when I am trying to add padding it disabling the submit button (non-clickable) and if I am removing the padding then its enabling it (clickable). This is really weird issue. I am not getting whats exactly this.

Any help would be appreciated.

Answer 1

Okay.

So first your CSS isn’t quite correct that you pasted, remove the #header table etc..

.search-btn{width: 60px; margin-left: 5px;                                                          
                             border: 1px solid #D5EA3B;
                             padding: 9px;
                             display: inline-block;
}

So the padding isn’t the issue, the border is the issue making it appear that it isn’t clicking. If you visit: http://jsfiddle.net/3w4e5/2/ you see that the button works as expected,however when you re-add the border is appears to be broken.

You will want to create a hover and active version of the button as well:

See: http://jsfiddle.net/3w4e5/3/

Update:

See this fiddle for an active & hover CSS versions added in so it shows that the button is hovered and clicked on, your initial CSS make it’s so the button doesn’t look like it’s being clicked but it is.

http://jsfiddle.net/3w4e5/4/