Question

Style:

#logo {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 120px;
    height: 72px;

    background-color: #abc;
    color: black;
    outline: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.75);

    /* The background image is set inline */
}

JSFiddle:

http://jsfiddle.net/CF7P2/

Chrome:

FireFox:

Why is the FireFox version drawing the margin so far away from the box? Can I stop it from doing so, or can I achieve the same visual result using some other method?

Answer 1

In Firefox, box-shadow pushes outline outward. (Not sure if by bug or by feature…)

Method 1

I’d achieve what you’re trying to do by wrapping it in another div, and applying the box-shadow to that.

Like so:

Fiddle

<div id='logo_wrapper'> ... </div>

<!-- -------------------- -->

#logo, #logo_wrapper {
    width: 120px;
    height: 72px;
}
#logo_wrapper {
    position: absolute;
    top: 14px;
    left: 14px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.75);
}
#logo {
    background-color: #abc;
    color: black;
    outline: 1px solid rgba(255, 255, 255, 0.2);

    /* The background image is set inline */
}

Method 2

You can use outline-offset and a Firefox CSS hack if you do not wish to use the wrapper div. Now, please do not ask why I used 21px instead of 15px; I got to that value by testing… it should have worked with 15px.

Fiddle

body {
    background-color: #444;
}

#logo {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 120px;
    height: 72px;

    background-color: #abc;
    color: black;
    outline: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.75);

    /* The background image is set inline */
}
#logo, x:-moz-any-link {
    outline-offset: -21px;
}