Sep082010

How can I make a CSS button code W3C compliant?

Eduardo Rivas asks:

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?


Know someone who can answer? Share the question with your friends!

Comments for this Question are closed.

If you are looking for help, please ask a new question here.

We will be happy to help you!

Hide 7 Comments

  • Phil Schaf March 28, 2011

    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.

  • Dd March 4, 2011

    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?

  • Josh Fox September 17, 2010

    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.

  • Richard Bradshaw September 17, 2010

    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.

  • Eduardo Rivas September 17, 2010

    Any ideas?

  • Eduardo Rivas September 9, 2010

    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.

  • Josh Fox September 8, 2010

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

Please wait...