SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,827
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)

    Form button quetion for a CSS expert.

    Ok, so I will now officially classify myself as a theorist, as mot of my post here are about what/how something could be done rather than how to fix specific code for a specif page. I am trying to figure a different way to semantically style buttons and I wonder if it can be done at all.


    We started working on < form > and I thought it was interesting that you had a< button > tag which , as its name implies , made a button of a default style with whatever text you put within the tags. The "default button graphic" remains the same unless you change any of the attributes of the button , other than "color:" with CSS. So if you ad a border or change background, background-color, etc the button will become a rectangle box. Conversely , I have noted that the default style "graphic" for buttons is fluid ... you can have a nearly infinitely long text within the button tags and it will be contained in the button ( tho it it will NOT retain endcaps if it has to grow vertically). If you put NO TEXT within the button tags you get essentially two encaps together.


    What this indicates to me is that the BUTTON tags has, by default, something akin to a "sliding door" default style to make the button horizontally fluid. Of course once you even begin to style the button with CSS these graphic seem to go away. you can place a graphic of your own, but now you must know the EXACT dimensions of the button for the graphic to be effective. Is there knot a way to replace the ORIGINAL default style graphics, which I as I have theorized must be in two parts , like a sliding door .. WITHOUT the use of an extra tag wrapped around or withing the button. After all the original button stilling MUST have had this behaviour inbuilt by default.

    Am I way off here?

  2. #2
    SitePoint Zealot
    Join Date
    Apr 2007
    Location
    New London, CT
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that is an interesting question. I would think that browsers that support it you could use the border-radius rule to make the rounded corners come back like:

    Code CSS:
    button {
        background-color: #ccc;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border: 1px solid #000;
        padding: 10px;
    }

    I just tried it and the border-radius does work.

    Conversely you could also use a span inside of the button element and use the sliding doors method as usual. I know for a fact that there are tutorials out there if you Google it.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,827
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    funk,
    the thin is I wonder if this could be done w/o the use of any tag other than the button tag. after all the button tag seems to employ TWO graphics to get the horizontally fluid button effect, right?

  4. #4
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Span inside of the button element is the key area to review, along with any conflicting code surrounding the area, or even page,
    If you email me the source file, i can help

  5. #5
    SitePoint Zealot
    Join Date
    Apr 2007
    Location
    New London, CT
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think that there is a real solution to this unless you can have multiple background images on a given element.

    I know the CSS3 spec has it but until browsers reliably support this, it can only be done using the inner span element.

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,827
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    thank you. there is no source file as am just pondering.

    EXAMPLE:
    look at how this behaves (with no css applied)
    <button>button </button>
    <button>hi am also a button but much longer </button>

    you can see that the browsers automatically expand the button horizontally.

    if we ad CSS, such as:
    button {background: url (button.gif) no-repeat;}
    OR
    button {background: url (button.gif) repeat-x;}

    we get a button with our graphic but no rounded corners (button.gif was , for example , to be the shape of the button, then we woudl also have to ad height: and width: to accomodate the graphic ( which means the button would break if the user changed teh size of the text in his browser or if we added extra text to the button)

    What I am guessing is that by default buttons must use two graphics.. right? but we seem to only be able to change one? ( unless we use <span> or <divs> or other tags to simulate the otherhalf of the button.. but I am wondering if that can be avoided .. since the default behavioir of a button is horizontally fluid w/o using a second tag.

  7. #7
    SitePoint Zealot
    Join Date
    Apr 2007
    Location
    New London, CT
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    With CSS3 we could do the following:

    Code CSS:
    button {
        background: url (left-button.gif) no-repeat left, url (mid-button.gif) repeat-x, url (right-button.gif) no-repeat right;
    }

    But alas, CSS3 won't be supported for another hundred years or so

  8. #8
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,827
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    wah! I don't wanna wait a hundred years,lol. how do browsers do their default buttons. Something mus be there that makes these things fluid by default before the style is applied!

  9. #9
    SitePoint Zealot
    Join Date
    Apr 2007
    Location
    New London, CT
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is something that is programmed into the browser, as you'll notice most browsers have a different default style for nearly all of the form and input elements.

    I had read an article some time ago that discussed the way browsers define form elements, but I can't find it. I'll see what I can do and post a link here.

  10. #10
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Browser form styling is done internally in the browser (so to speak). The browser doesn't generate any hidden elements to create the button, and it's not using any special styles to style it. It's simply interpreting the button element and rendering it in a non-html way.

    There was a bit of a flaw in firefox where the auto-scroll feature (middle mouse click) generated html code at the bottom of the page. This generated html as you can imagine could be styled using CSS (sitepoint even took advantage of this). The same isn't true for buttons though, at least not in firefox.

  11. #11
    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)
    If you want to see how Firefox styles buttons by default then look in the res folder and open forms.css.

    This is an extract for buttons.
    Code:
    /* buttons */
    
    /* Note: Values in nsNativeTheme IsWidgetStyled function 
       need to match button background/border values here */
    
    button, 
    input[type="reset"],
    input[type="button"],
    input[type="submit"] { 
      -moz-appearance: button;
      /* The sum of border-top, border-bottom, padding-top, padding-bottom
         must be the same here, for text inputs, and for <select>.  For
         buttons, make sure to include the -moz-focus-inner border/padding. */
      padding: 0px 6px 0px 6px;
      border: 2px outset ButtonFace;
      background-color: ButtonFace;
      color: ButtonText; 
      font: -moz-button;
      line-height: normal !important;
      white-space: pre;
      cursor: default;
      -moz-box-sizing: border-box;
      -moz-user-select: none;
      -moz-binding: none;
      text-align: center;
    }
    
    button {
      /* Buttons should lay out like "normal" html, mostly */
      white-space: inherit;
      text-indent: 0;
    }
    
    *|*::-moz-button-content {
      display: block;
    }
    
    button:hover,
    input[type="reset"]:hover,
    input[type="button"]:hover,
    input[type="submit"]:hover {
      background-color: -moz-buttonhoverface;
      color: -moz-buttonhovertext;
    }
    
    button:active:hover,
    input[type="reset"]:active:hover,
    input[type="button"]:active:hover,
    input[type="submit"]:active:hover {
      padding: 0px 5px 0px 7px;
      border-style: inset;
      background-color: ButtonFace;
      color: ButtonText;
    }
    
    button::-moz-focus-inner,
    input[type="reset"]::-moz-focus-inner,
    input[type="button"]::-moz-focus-inner,
    input[type="submit"]::-moz-focus-inner,
    input[type="file"] > input[type="button"]::-moz-focus-inner {
      padding: 0px 2px 0px 2px;
      border: 1px dotted transparent;
    }
    
    button:focus::-moz-focus-inner,
    input[type="reset"]:focus::-moz-focus-inner,
    input[type="button"]:focus::-moz-focus-inner,
    input[type="submit"]:focus::-moz-focus-inner,
    input[type="file"] > input[type="button"]:focus::-moz-focus-inner {
      border-color: ButtonText;
    }
    
    button[disabled]:active, button[disabled],
    input[type="reset"][disabled]:active,
    input[type="reset"][disabled],
    input[type="button"][disabled]:active,
    input[type="button"][disabled],
    select[disabled] > input[type="button"],
    select[disabled] > input[type="button"]:active,
    input[type="submit"][disabled]:active,
    input[type="submit"][disabled] {
      /* The sum of border-top, border-bottom, padding-top, padding-bottom
         must be the same here and for text inputs */
      padding: 0px 6px 0px 6px;
      border: 2px outset ButtonFace;
      color: GrayText;
      cursor: inherit; 
    }
    As you can see there are many proprietary features employed to style the buttons by default and although some you can use yourself there would not be much point as it would have no effect in other browsers.

    With most form elements the default styling is part of the browsers chrome and not usually something you can access. Indeed in IE none of the default styles for anything are accessible as they are hidden away somewehere in the registry or hard coded somewhere out of sight.

    You could style the buttons using border-radius (or -moz eqivalent) to get your rounded corners but won't work in IE of course.

  12. #12
    SitePoint Zealot
    Join Date
    Apr 2007
    Location
    New London, CT
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul. I had a feeling I was on the right track.

  13. #13
    SitePoint Enthusiast bind727's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Alberta
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is it possible to remove the "inner border" that IE puts on it's buttons?

    Here's an example: http://ipinfo.info/netrenderer/index...mples/buttons/
    +---------------------------+
    Joel Pittet | Web Developer
    www.JoelPittet.com
    +---------------------------+

  14. #14
    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)
    Quote Originally Posted by bind727 View Post
    Is it possible to remove the "inner border" that IE puts on it's buttons?

    Here's an example: http://ipinfo.info/netrenderer/index...mples/buttons/
    You can change the border on input buttons but you will lose the round effect.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    input.test{
        border:1px solid #ccc;
        background:#fff;
    }
    </style>
    </head>
    <body>
    <form id="form1" method="post" action="">
        <div>
            <input class="test" type="submit" name="button" id="button" value="Submit" />
        </div>
    </form>
    </body>
    </html>
    As with most form controls once you change something you tend to lose the default style effect.

  15. #15
    SitePoint Enthusiast bind727's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Alberta
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the prompt to help continue my testing. I found that in fact the round border style had no effect on the 'inner-border'. The odd thing is it is the background image(or possibly a way in which I declared it that MS doesn't like).

    Reduction is a great way to find where things are not working in CSS, thanks for the sample post.
    I did a number of tests, removing borders, extra declarations I had, and slowly putting them back in until the 'inner-border' popped it's ugly head.

    Unfortunately this issue will be the same for IE 8 RC1. I hope I find something in my tests that can fix this.
    Last edited by bind727; Feb 6, 2009 at 08:53. Reason: IE 8 note
    +---------------------------+
    Joel Pittet | Web Developer
    www.JoelPittet.com
    +---------------------------+

  16. #16
    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)
    I did a number of tests, removing borders, extra declarations I had, and slowly putting them back in until the 'inner-border' popped it's ugly head.
    I wasn't exactly sure to which type of button you were referring and which border

    If you have some sample code that we can see what you are trying to do exactly then it may help although form elements are notoriously awkward for styling in a cross browser way.

  17. #17
    SitePoint Enthusiast bind727's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Alberta
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh I know a lot of the form elmeent issues well, I spent many hours on form elements. If nothing else I will learn a lot.

    Here is a link to my experiment
    http://joelpittet.com/examples/buttons/

    And again, this is the link above to the IE 6/7 render tool
    http://ipinfo.info/netrenderer/index...mples/buttons/

    I will be playing with it more tonight and making notes on my findings.

    I wasn't exactly sure to which type of button you were referring and which border
    That's why I quoted 'inner border' because that seems to be what it looks like and there is no real CSS declaration for it.
    +---------------------------+
    Joel Pittet | Web Developer
    www.JoelPittet.com
    +---------------------------+

  18. #18
    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,

    Ok I know what you mean now

    It's not an extra border but space that IE reserves for applying focus on inputs I believe.

    In your example the extra color is the background color you are applying that bleeds through the 1px space that IE leaves to apply the focus.

    You could use this workaround for IE7 which involves using that 1px background as the border instead and making the real border transparent.

    Code:
        .primary {
            font-weight:bold;
            color: #000;
            background: #efa900 url(http://joelpittet.com/examples/buttons/img/primary-button-bg.gif) repeat-x 0 0;
            border: 1px solid #eee000;
        }
    *+html .primary
    {
    border:1px transparent solid !important;
    background-color:#eee000;
    }


    That should more or less like what you wanted with any luck

  19. #19
    SitePoint Enthusiast bind727's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Alberta
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the trick. Like you said it is the background color shining through, if it's an inner border or some kind of outer padding I am not sure yet. Although that trick makes my button one pixel smaller all the way around so I am going to have to add extra padding to compensate.

    I am aiming to use the least amount of hacks to get this to work, and learn as much about these implementations diffs as possible.

  20. #20
    SitePoint Enthusiast bind727's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Alberta
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This all stemmed from an article a google developer wrote up about the new button designs on gmail.

    http://stopdesign.com/archive/2009/0...he-button.html

    Wouldn't it be nice to be able to do the same thing without the two extra nested span tags?
    +---------------------------+
    Joel Pittet | Web Developer
    www.JoelPittet.com
    +---------------------------+

  21. #21
    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)
    Although that trick makes my button one pixel smaller all the way around so I am going to have to add extra padding to compensate.
    Yes you will need to to add the extra pixel back in to get pixel perfection.

    Perhaps that's why they never uses the button element although this seems to be a bit of a mouthful to me.
    Code:
    <div tabindex="0" act="7" class="goog-imageless-button goog-inline-block goog-imageless-button goog-imageless-button-collapse-right goog-imageless-button-primary” id=”">
    <div class=”goog-inline-block goog-imageless-button-outer-box”>
    <div class=”goog-inline-block goog-imageless-button-inner-box”>
    <div class=”goog-imageless-button-pos”>
    <div class=”goog-imageless-button-top-shadow”> </div>
    <div class=”goog-imageless-button-content”><b>Archive</b></div>
    </div>
    </div>
    </div>
    </div>
    In reality it's just basic round corner techniques and i have styles elements like that all the time using an absolute element to get a shadow effect. Most of those classes could be removed by some careful selection of elements anyway.

    They are not actually using any input elements at all which is a bit of a shame and if you have JS switched off they won't of course work.


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
  •