Question

I’m a bit baffled with the way the CSS outline property is rendering on Firefox 7 or below.
It’s clearly got a problem somewhere, but I just can’t find it.

It works fine on all other main browsers (Opera, Chrome, IE, Safari).

I’ve added a couple of screenshots for reference. One from Firefox:

and the other from Chrome:

Here’s the CSS:

form#commentform input:focus { outline: 2px outset #717377 }

Here’s XHTML:

<form id="commentform">
      <div>
         <label for="name">
            <strong>
            Nom
            <span id="sname"></span>
            </strong>
         </label>
         <input type="text" tabindex="1" id="name" name="name" class="textbox" />
      </div>
...
</form>

How can I solve this?

Answer 1

On Firefox outlines are drawn around the box-shadow (not inside).
So you will have to serve it (using a css hack) an additional rule: outline-offset: -X (X = shadow’s length).