How can I make a CSS button code W3C compliant?

Eduardo Rivas September 8, 2010
Pinterest Stumbleupon Whatsapp

I use iWeb Tools to create rounded CSS buttons. However, when including the provided code in the stylesheet of my site, W3C CSS validator returns the following error:

The pseudo-element ::-moz-focus-inner can’t appear here in the context css21 [-moz-focus-inner]. The offending snippet is this:
button::-moz-focus-inner {border: none; }

If I comment it out, no errors are returned and the site validates; but Firefox won´t render the buttons correctly. Any suggestions?

Ads by Google

  1. Phil Schaf
    March 28, 2011 at 12:20 pm

    afaik yes. the following should’t make a big visual difference
    button::-moz-focus-inner {padding:0; border:0}
    button:focus {outline:1px dotted black; outline-offset:-3px}

    feel free to replace the black dotted border with a more modern one. i use (-moz-)box-shadow instead, because i think that everyone using a browser older than firefox 3.5 may be punished.

  2. Dd
    March 4, 2011 at 5:19 pm

    Just my 2 cents, but I think that the real question here is "How does a developer remove the black dots around a button in FF while still providing section 508 accessibility?"

    Is FF/Moz the only browser that does that?

  3. Josh Fox
    September 17, 2010 at 11:07 pm

    Richard is right about the "-moz" stuff not validating. To my knowledge, anything that is browser, or rendering engine, specific will not validate, even if it is proper.

  4. Richard Bradshaw
    September 17, 2010 at 5:11 pm

    Validating CSS is pointless. No vendor prefixed CSS will validate, as by design it's not in the spec. None of the -moz stuff will validate, but that doesn't make it bad code. Aiming for valid CSS is a waste of time.

  5. Eduardo Rivas
    September 17, 2010 at 4:21 am

    Any ideas?

  6. Eduardo Rivas
    September 9, 2010 at 9:13 pm

    This is the output of the button generator:

    button {
    border: 0 none;
    cursor: pointer;
    font-weight: bold;
    padding: 0 15px 0 0;
    text-align: center;
    height: 30px;
    line-height: 30px;
    width: auto;
    }

    button.rounded {
    background: transparent url( btn_right.png ) no-repeat scroll right top;
    clear: left;
    font-size: 0.8em;
    }

    button span {
    display: block;
    padding: 0 0 0 15px;
    position: relative;
    white-space: nowrap;
    height: 30px;
    line-height: 30px;
    }

    button.rounded span {
    background: transparent url( btn_left.png ) no-repeat scroll left top;
    color: #FFFFFF;
    }

    button.rounded:hover {
    background-position: 100% -30px;
    }

    button.rounded:hover span {
    background-position: 0% -30px;
    }

    button::-moz-focus-inner {
    border: none;
    }

    I then added it to the stylesheet of my site, resulting in the described error when trying to validate CSS.

  7. Josh Fox
    September 8, 2010 at 10:54 pm

    Could you please provide a code snippet to put this error into better context?

Ads by Google