CODEWITHSUNDEEP
csshtml-table
J.K.A.
J.K.A.

Reputation: 7404

Padding disables the submit button

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.

Upvotes: 0

Views: 97

Answers (2)

defau1t
defau1t

Reputation: 10619

The problem is because, you have added a border: 1px solid #D5EA3B;

UPDATE:

The problem is that your td that houses the input type="text" and submit button is overlapping or sitting on top of the Submit. You should divide the second td in to two tds and have input type text in one td and submit button in other.

Upvotes: 0

Ryan McDonough
Ryan McDonough

Reputation: 10012

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/

Upvotes: 1

Related Questions