Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS outline not rendering correctly in Firefox

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:

enter image description here

and the other from Chrome:

enter image description here

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?

like image 767
user706600 Avatar asked Oct 20 '11 09:10

user706600


2 Answers

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).

like image 145
Knu Avatar answered Sep 29 '22 13:09

Knu


This bug will be fixed with Firefox 30: https://bugzilla.mozilla.org/show_bug.cgi?id=480888#c109.

Until then you could apply another box-shadow to the element, since you can have multiple box-shadows:

.element {
    box-shadow: your values old box-shadow, 0 0 0 2px #717377;
}
like image 33
gefangenimnetz Avatar answered Sep 29 '22 11:09

gefangenimnetz