SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast szigeti's Avatar
    Join Date
    May 2005
    Location
    Hungary
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question To tame a <button>

    Actually, I would like to decorate a <button> tag, but it seems to me that this tag is much more untameable in Firefox than in Explorer.

    Here's the test code:
    HTML 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>Let's test!</title>
    <style type="text/css">
    button {
    	background: red;
    	border: 0;
    	height: 21px;
    	margin: 0;
    	padding: 0;
    	overflow: visible;
    	width: auto;
    	white-space: nowrap;
    }
    button div {
    	background: green;
    	border: 0;
    	color: white;
    	height: 21px;
    	margin: 0;
    	padding: 0;
    }
    </style>
    </head>
    <body>
    
    <div>
    	<button>
    		<div>
    			Button label
    		</div>
    	</button>
    </div>
    
    </body>
    </html>
    If you take a look at it in MSIE, you will see only the green background of the inner <div>.

    In Firefox however there is a 2px horizontal padding and a 1px upper padding where the red background of the button comes through.

    (If you are wondering, the "overflow: visible" and the "width: auto", "white-space: nowrap" is a bugfix for MSIE. Without them the button would be insanely wider than it is necessary, and the content would be broken into multiple lines.)

    Does anyone have an idea on how should I remove those unwanted paddings from the button element in Firefox without explicitly defining negative margin values in the inner div for the problematic directions?
    Eat healthy,
    Exercise daily,
    Die anyway.

  2. #2
    SitePoint Guru Ruben K.'s Avatar
    Join Date
    Jun 2005
    Location
    Alkmaar, The Netherlands
    Posts
    693
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you sure you can even put a block level element such as a layer inside a button?

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, it's allowed (I assume you mean div, not layer). Buttons are replaced inline elements and act similar to inline-block boxes. Another example is object, which is an inline element that can have block-level children.

    I think cross-browser support when it comes to button is a bit iffy, though.
    Birnam wood is come to Dunsinane

  4. #4
    SitePoint Enthusiast szigeti's Avatar
    Join Date
    May 2005
    Location
    Hungary
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It doesn't really matter. The bug is still there when I use a <span> inside of a <button>.
    Eat healthy,
    Exercise daily,
    Die anyway.

  5. #5
    SitePoint Enthusiast szigeti's Avatar
    Join Date
    May 2005
    Location
    Hungary
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So currently I have no other option but to set negative margins for the inner container, and override these for MSIE versions.

    Thank you for your reply, I have suspected that there is no elegant, cross-browser solution for this problem.
    Eat healthy,
    Exercise daily,
    Die anyway.

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The code works as indended in Opera, but Firefox and IE seem to be buggy. The screenshot above shows the rendering in Opera 9.27, Firefox 2.0 and IE6, all under Windows XP.
    Attached Images Attached Images
    Birnam wood is come to Dunsinane

  7. #7
    SitePoint Enthusiast szigeti's Avatar
    Join Date
    May 2005
    Location
    Hungary
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I haven't yet tested it in IE6, but in IE7 it seems to be perfect under XP too.
    Attached Images Attached Images
    Eat healthy,
    Exercise daily,
    Die anyway.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Does anyone have an idea on how should I remove those unwanted paddings from the button element in Firefox without explicitly defining negative margin values in the inner div for the problematic directions?
    Firefox's default forms.css stylesheet show this styling for buttons.
    Code:
    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: normal;  
      text-indent: 0;
    }
    
    *|*::-moz-button-content {
      display: block;
    }
    
    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;
    }
    
    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;
    }
    So try adding something like this:

    Code:
    button::-moz-focus-inner{padding:0;border:none}
    e.g.
    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>Let's test!</title>
    <style type="text/css">
    button {
        background: red;
        border: 0;
        height: 21px;
        margin: 0;
        padding: 0;
        overflow: visible;
        width: auto;
        white-space: nowrap;
    }
    button::-moz-focus-inner{padding:0;border:none}
    
    button div {
        background: green;
        border: 0;
        color: white;
        height: 21px;
        margin: 0;
        padding: 0;
    }
    </style>
    </head>
    <body>
    <div>
        <button>
        <div> Button label </div>
        </button>
    </div>
    </body>
    </html>

  9. #9
    SitePoint Enthusiast szigeti's Avatar
    Join Date
    May 2005
    Location
    Hungary
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, from now on I am officially worshipping you as the One and Only True CSS God!

    Of course it worked!

    Such an elegant touch to dissect the inner mysteries of Firefox.

    I bow before you.
    Eat healthy,
    Exercise daily,
    Die anyway.

  10. #10
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This thread was a great help in resolving my Firefox problem. But, the same thing is happening now in Chrome: any ideas?

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    How about you start a new thread as this is a new issue and we can help debug chrome for you . When you start your thread be sure to post a link to the site and/or post the HTML and CSS.

    Welcome to SP .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  12. #12
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, as suggested, I did post this as a new thread. I'll be interested to see if anyone has any solutions.

    Thanks.

  13. #13
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Firefox's default forms.css stylesheet show this styling for buttons.
    So try adding something like this:

    Code:
    button::-moz-focus-inner{padding:0;border:none}
    Genius!


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
  •