What does this CSS value mean?

Question

While viewing the source of a web page, I came across this CSS, applied to a span within a button:

.whatever button span {
    position: absolute;
    left: -1e+7px;
}

What does left: -1e+7px; mean? Is this some trick I should be aware of?

Answer 1

It appears to be scientific notation (in this case, for -10,000,000px). To the best of my knowledge, CSS does not allow scientific notation (it is absent from the standard, but a Google search for "css scientific notation" turns up several complaints against Batik — an SVG engine — for not supporting it). I would guess that some CSS parsers do support such notation, despite it not being part of the standard, but if so, I cannot find information on which parsers support it.

To be safe, I would avoid using it in your own stylesheets.

Answer 2

From the CSS2 spec on Numbers

---

Some value types may have integer values (denoted by ~integer~) or real number values (denoted by ~number~). Real numbers and integers are specified in decimal notation only. An ~integer~ consists of one or more digits "0" to "9". A ~number~ can either be an ~integer~, or it can be zero or more digits followed by a dot (.) followed by one or more digits. Both integers and real numbers may be preceded by a "-" or "+" to indicate the sign. -0 is equivalent to 0 and is not a negative number.

---

IE accepts scientific notation. Firefox ignores it.

Answer 3

Does CSS support scientific notation? Are they trying to put the button ten million pixels off to the side, maybe to have a default button that's not visible?

Answer 4

This is scientific notation, meaning -1*10^7 = -10000000.

Answer 5

That is not valid CSS, according to the W3C validator:

.whatever button span    Value Error : position attempt to find a semi-colon before the property name. add it
.whatever button span    Value Error : left Unknown dimension 1e

If you add the missing ; after position: absolute, you still get:

whatever button span     Value Error : left Unknown dimension 1e