Form with custom Input Button not submitting

[eluser]The Wizard[/eluser]
Hello Friends!

i have a design with a custom submit button.

Code:

<?= form_open('comment/add_comment'); ?>

    <?= form_hidden('data_id', $video['id'] ); ?>
    <?= form_hidden('type', FLAG_VIDEO ); ?>

    <!-- Yorum Yaz-->
    <div id="yorumyaz">
        <h1>Comment on this video</h1>
        <div id="yorumtext">

            &lt;!-- <div class="cavatar"><img src="&lt;?= base_url(); ?&gt;assets/images/avatar.png" /></div> --&gt;

            <div class="feed-uye-img">
                <img src="&lt;?= base_url() . 'media/image/medium/' . $video['owner_id'] .'/'. $video['picture_profile']; ?&gt;" />
            </div>


            <div id="yorum-textarea">
                &lt;textarea id="charcount" class="y-textarea"&gt;&lt;/textarea>
            </div>

            <div class="buttonsabit" id="sagayasla">
                &lt;input class="buttonsabit large" type="submit" name="submit" value="Gönder" /&gt;
            </div>
            
            &lt;!-- <div id="y-karakter">Remaining character count:<span class="yolrakam">500</span></div>                             --&gt;

        </div>

    </div>
    &lt;!-- /Yorum Yaz--&gt;

    <div class="butform">
        &lt;input id="buttonsabit large" type="submit" name="" value="Gönder" /&gt; &lt;!-- THIS DOES NOT WORK !!! --&gt;
    </div>
    
    &lt;?= form_submit('submit', 'Submit' ); ?&gt; //this one works



&lt;?= form_close(); ?&gt;

does anybody have an idea why the input does NOT submit the form?

thanks in advance

[eluser]nevsie[/eluser]
I cannot see any reason why it would not work...

what CSS are you using around it? Are you hiding the button and displaying a background image or something? My bet would be the CSS is hiding the button so it cannot be clicked?

[eluser]The Wizard[/eluser]
well possible. yes indeed, the button transforms into a green typish button so it looks "cool".

this is the CSS for the buttons i think:

Code:

.button, .button:visited {
    background: #222;
    display: inline-block;
    padding: 5px 10px 6px;
    color: #fff;
    text-decoration: none;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    position: relative;
    cursor: pointer;
    margin: 0px 5px;
}

    .button:hover                            { background-color: #111; color: #fff; }
    .button:active                            { top: 1px; }
    .small.button, .small.button:visited             { font-size: 11px}
    .button, .button:visited,
    .medium.button, .medium.button:visited         { font-size: 13px;
                                                  font-weight: bold;
                                                  line-height: 1;
                                                  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
                                                  }
                                                  
    .large.button, .large.button:visited             { font-size: 14px;
                                                      padding: 8px 14px 9px; }
                                                      
    .super.button, .super.button:visited             { font-size: 34px;
                                                      padding: 8px 14px 9px; }
    
    .pink.button, .magenta.button:visited        { background-color: #e22092; }
    .pink.button:hover                            { background-color: #c81e82; }
    .green.button, .green.button:visited        { background-color: #91bd09; }
    .green.button:hover                            { background-color: #749a02; }
    .red.button, .red.button:visited            { background-color: #e62727; }
    .red.button:hover                            { background-color: #cf2525; }
    .orange.button, .orange.button:visited        { background-color: #ff5c00; }
    .orange.button:hover                        { background-color: #d45500; }
    .blue.button, .blue.button:visited            { background-color: #2981e4; }
    .blue.button:hover                            { background-color: #2575cf; }
    .yellow.button, .yellow.button:visited        { background-color: #ffb515; }
    .yellow.button:hover                        { background-color: #fc9200; }
    
    
input.yenibutton {
    background: #222;
    display: inline-block;
    padding: 5px 10px 6px;
    color: #fff;
    text-decoration: none;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    position: relative;
    cursor: pointer;
    margin: 0px 5px;
    width: 10px;
    float: left;
}

is this a problem?

how to avoid it?

thank you in advance.

[eluser]nevsie[/eluser]
well confirm it first, by disabling your CSS for that button and see if it works.
if that proves that to be the cause - then modify your CSS a step at a time to find whats causing it.

Post the CSS up here and i will have a look.
But my bet is that you are hiding the button and using the wrapping div to display the green typeish button. I guess you would need to not hide the button, and set the size of it to match your image, or similar... not sure...

I think one i just finished applied a style to the button using a class and had an empty value:

Code:

<input type="submit" name="button" id="button" value="" class="butt-next" />

and then css was somehting like:

Code:

.butt-next {
    background-image: url(../img/next.gif);
    height: 35px;
    width: 61px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    cursor: pointer;
}

[eluser]The Wizard[/eluser]
hello nevsie!

yes indeed, i will try that. i updated my post to include the css. i will try that right away

[eluser]nevsie[/eluser]
looking at you CSS - there is so much in there that is CSS3 and browser dependent that you are bound to get bugs. Just image if a IE6 user saw this!!!

I always keep it simple... as that is a lot of code for a couple of buttons!

[eluser]The Wizard[/eluser]
thank you nevsie )
yes, i know that

the css has been made by a friend of mine. i know it's kinda weird
and from time to time, pretty ugly

i myself know a little bit css but still trying to figure it out.

by the way, without the css classes and the div of the button, it works.

so definitely a css issue.

[eluser]nevsie[/eluser]
have fun learning and debugging CSS then!!! good luck

[eluser]The Wizard[/eluser]
thank you nevsie