Why is tick box width styled by php, not css?

Ok, so this was actually a little more complicated than I first though, but I think I have a solution and would welcome your comments.

Apart from the width attribute mentioned above that I have commented out in my plugin php file, there was another issue I found with getting the plugins tick box and label to look like the others below my comment form (for subscribing to comments and updates etc).

I eventually tracked this down to all of the other labels to the right of each tickbox being enclosed in <label> tags, whereas this plugins text label is only in <p> tags. Hence the correct formatting was not being picked up.

I have therefore modified the javascript in the ‘public output’ section at the bottom of the plugins php file to add an additional <label> element and add the “confirm you are a human” text to this rather than just the standard <p> element.

So the last section of the plugins php now looks like this:

/*********************************************
    *		public output
    *********************************************/

    /** gasp_add_checkbox
    * Called by comment_form action
    * Adds javascript to create a checkbox on the comment form
    */
    function gasp_add_checkbox(){
        if(!is_user_logged_in()){
            $options = gasp_get_options();
            echo '<p id="gasp_p" style="clear:both;"></p>';
            echo '<script type="text/javascript">
            //v1.2
            var gasp_p = document.getElementById("gasp_p");
            var gasp_cb = document.createElement("input");
            var gasp_text = document.createTextNode(" '.$options['checkbox_label'].'");
            gasp_cb.type = "checkbox";
            gasp_cb.id = "'.$options['checkbox_name'].'";
            gasp_cb.name = "'.$options['checkbox_name'].'";
             /*gasp_cb.style.width = "25px";*/
            gasp_p.appendChild(gasp_cb);
	     var gasp_label = document.createElement("label");
             /*gasp_label.id = "gasp-label";*/
             /*gasp_label.name = "gasp-label";*/
	     gasp_p.appendChild(gasp_label);
             gasp_label.appendChild(gasp_text);
            var frm = gasp_cb.form;
            frm.onsubmit = gasp_it;
            function gasp_it(){
            if(gasp_cb.checked != true){
            alert("'.$options['checkbox_alert'].'");
            return false;
            }
            return true;
            }
            </script>
            <noscript>you MUST enable javascript to be able to comment</noscript>
            <input type="hidden" id="gasp_email" name="gasp_email" value="" />';
        } else {
            echo '<!-- no checkbox needed by Growmap Anti Spambot Plugin for logged on user -->';
        }
    }

There are 4 lines changed from standard which are indented one extra space to the right, which are this line commented out:

/*gasp_cb.style.width = "25px";*/

these lines added:

var gasp_label = document.createElement("label");
gasp_p.appendChild(gasp_label);

and this line modified:

gasp_label.appendChild(gasp_text);

Any thoughts, comments or issues with this that you can see? Not sure whether this formatting issue is unique to my site (using the ‘Striking’ theme) or more general.

Regards, James

Glad I’m not the only one Tom!

So, any thoughts or suggestions from the developers please?