SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jul 2004
    Location
    Williamstown, NJ
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Margins surrounding button text

    Happy new year All:

    I'm trying to create a css class that will eliminate the space before and after the text on an html button.

    here is my css:

    Code:
      <style type="text/css">
       <!--
       .smallButton {
           margin: 0px;
           padding: 0px;
           text-align: left;
           text-indent: 0px;
           width: auto;
           height: auto;
       }
       -->
       </style>
    and here is my button:

    Code:
      <input name="Submit" type="submit" class="smallButton" value="Print Checks">
    The text-align parameter is just there because i wanted to prove to myself that i was actually able to change the appearance of the button. I am able to change the alignment but not the margin / padding surrounding the text.
    Any suggestions?

    Thanks:

    Rob

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    button { height:1.5em; width:3em;}
    HTML Code:
    <button>Hello</button>

  3. #3
    SitePoint Member
    Join Date
    Jul 2004
    Location
    Williamstown, NJ
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks BonRouge:

    That does change the width but not exactly in the way that i want. In mozilla my buttons look fine but in IE I get buttons with spacing before and after the text that appears somehow proportional to the length of the caption string. What i'm trying to do is to minimize the button size by eliminating that spacing.

    Thanks.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I think the only way to do it in IE is with width as Bon Rouge suggested

    Form controls are notoriously difficult to style and the properties allowed for styling vary between browsers also. (But if you find a way then let us know )

    Paul

  5. #5
    SitePoint Member
    Join Date
    Jul 2004
    Location
    Williamstown, NJ
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys:
    It turns out that i did find a way. I simply abondoned the buttons all together and just used image fields. Of course this raises a new set of problems in the processing on the server side but such is life.

    Rob


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
  •