Question

Today I stumbled on a simple box
styled as follow:

div.menubox {
    background-color: #FFFFFF;
    border: 1px solid #887777;
    border-radius: 0 5px 5px 0;
    box-shadow: 1px 1px 3px #998888;
    font-family: Lato,sans serif;
    font-size: 12px;
    left: -5px;
    margin-bottom: 2em;
    min-height: 675px;
    overflow: hidden;
    padding: 25px 0 2em;
    position: absolute;
    top: 195px;
    transition-duration: 0.5s;
    transition-property: top;
    width: 215px;
    z-index: 99;
}

It contains an ul and several li. Nothing of exceptional until i ask to firebug to print in console the menubox height.

console.log(document.getElementById("menubox").offsetHeight) returns an outstanding “677.2px”.

It is the first time I step on such strange behaviour (I’m running firefox 17, with firebug 1.10.6, with a bunch of plugins, on an old windows XP installation).

It is a known issue of one of the component or a new “feature”?

ADDENDUM

Removing the border-shadow, border-radius css properties (disabled by via firebug) the result doesn’t change.

chrome reports “649.5999755859375px” uhmm… need further investigation of the
underlying javascript code

EXTRA
Ops, the javascript code was a dead line filling a variable, the true code is
console.log(document.id(“menubox”).getStyle(“height))` so mootools 1.4.5 is the main suspected (issuing manually the command on console return an integer pixel count) on both browser.

The question is still live, though, have you encountered a similar behaviour, there is a workaround (beside rounding manually the result)?

Answer 1

Fractional parts on pixels is not strange in CSS as it is not a “dott” on the screen rather an angular measurement.

From the CSS 2.1 documentation:

“Pixel units are relative to the resolution of the viewing device,
i.e., most often a computer display. If the pixel density of the
output device is very different from that of a typical computer
display, the user agent should rescale pixel values. It is recommended
that the reference pixel be the visual angle of one pixel on a device
with a pixel density of 96dpi and a distance from the reader of an
arm’s length. For a nominal arm’s length of 28 inches, the visual
angle is therefore about 0.0213 degrees.”

More information can be found here: http://inamidst.com/stuff/notes/csspx

My guess is that you are mixing em:s with px:s and that will cause fragmented pixel values to be returned. Please note that there is nothing wrong with the behavior so I would not care as long as you don’t run into trouble. Especially as you only have defined a min-height on the DOM-element.