Please help with form styling

I am trying to figure out how to style the submit button separate from the other input fields.

Here is the form:

http://xennova.com/contact/

I am not sure how to do it, any help is appreciated.

AC

Just how you’ve done it (by adding a special class) is fine.

If you don’t want the styles that are on the other inputs, you can override them under these styles:

#contact-area input.submit-button {

}

If you don’t want those other input styles being applied in the first place, there are various methods.

The easiest would perhaps be to wrap the rest of the form code in a div with a class, say “general”, change those general input styles to

.general input {

}

There are more sophisticated methods of setting styles by targeting things like the ‘type’ and ‘value’ attributes, but this is not as reliable in some browsers.

Thanks a lot for your help. Is the way I fixed this acceptable as far as CSS validation goes?

#contact-area input.submit-button {
    float: right;
    margin: 10px 0px 0px 0px;
    padding: 0;
    border: none;
    background: none;
    width: auto;
}

Thanks again, I knew there was a simple solution.

Absolutely! Looks just fine. You can always check with the CSS Validator if you have any doubts about your CSS, too.

If you have any trouble with width:auto in any browsers (you shouldn’t, but I’m never totally confident about it), you could change it to

width: 126px;

just to be sure.

The width: auto could be left out, as it’s default, however IE is pretty famous for making submits (or whoever IE thinks is the default button if you have multiple submits or a submit and a reset) way too wide. I fixed this by telling some browsers the width was 0 while telling IE the width was auto. I think, I’d have to go look at my forms first.

Be careful removing padding from a submit button. Some browsers use it to make that “pushed” look you get when you click on them, which is valuable feedback to users.

Normally yes, although in this case the other inputs have a different width, which interferes with the submit button width.

Be careful removing padding from a submit button.

Good point. I should have thought of that.

Normally yes, although in this case the other inputs have a different width, which interferes with the submit button width.

Ah, missed that. Since I can’t style selects etc, I am so used to styling input[type=text] and leaving IE6 alone. So my submits don’t usually get hit.

Since this is an image, I would actually go ahead and set a width, and a height. I usually do if I’m doing it that way.

I should also mention the HTML is invalid. Forms are one of those special blocks who cannot hold inlnes (or inline-blocks) as direct children. Usually a fieldset fixes this problem, but since that generally requires a label (differs from HTML to XHTML) some people prefer a div.

Good policy. I’m over IE6.

Off Topic:

Glad to see the crazy cat avatar is back. It’s my fav!.. and it’s so… you! :wink:

[ot]yesh, the war photo was so serious. But, it was that time of year : )

so, PTHBBBB!!![/ot]