SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2001
    Location
    Kansas City, MO
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    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:

    Code:
    #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

    Code:
    .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.

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2001
    Location
    Kansas City, MO
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot for your help. Is the way I fixed this acceptable as far as CSS validation goes?

    Code:
    #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.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Andwise View Post
    Is the way I fixed this acceptable as far as CSS validation goes?
    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

    Code:
    width: 126px;
    just to be sure.

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    The width: auto could be left out, as it's default
    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.

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    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.
    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!

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:

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

    so, PTHBBBB!!!!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •