CSS button not clickable all over

Question

hi people,

Please take a look at THIS page.

Please feed in some random data and click on the edges of the button to submit.

PROBLEM: I am not able to click the button on the edges.

AIM: I want to extend the click-able portion to all over the button.

I think I have to introduce to it. But I am not sure where and how it has to be done.

The code I use for the button is

<?php echo $form->submit('Submit', array('class' => 'submit_input', 'div' => array('class' => 'stndrd_btn', 'style' => 'margin-top:20px;'))); ?>

Thanks and have a good day

Answer 1

Set the width and height attributes in submit_input css class to 100%

Answer 2

What library/framework are you using to generate forms? The code you posted doesn't tell us much about the generated HTML.

Anyway. If you inspect the DOM with Firebug or something similar, you'll see that the button element doesn't cover all the visual space.

Looking at your CSS (global_style.css), I can see that the width for this button is hardcoded to 131 pixels:

.submit_input {
    color:#FFF;
    margin:0 auto;
    text-align:center;
    font-size:14px;
    font-weight:bold;
    background:none;
    border:none;
    width:131px;
    height:22px;
    padding-top:6px;
    cursor:pointer;
}

The element that wraps the actual button (and shows the visual pointer cursor and background image) has a width of 140px and a height of 30px.

Now, you don't want to hardcode these values to the button again, you want to set this button to 100% width and height. This might not work if it's an inline element, so you need to set its display property to block. Replace the .submit_input selector to the following:

.submit_input {
    color:#FFF;
    margin:0 auto;
    text-align:center;
    font-size:14px;
    font-weight:bold;
    background:none;
    border:none;
    width: 100%;
    height: 100%;
    display: block;
    padding-top:6px;
    cursor:pointer;
}

That should do it. Cheers.