# CSS: “left”: Character n is neither a decimal digit number, decimal point, nor "e" notation exponential mark.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-left-character-is-neither-a-decimal-digit-number-decimal-point-nor-e-notation-exponential-mark
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The W3C validator parses inline CSS values character by character. When it encounters a numeric value for the `left` property, it expects the characters that follow to be part of a valid number (digits, a decimal point, or `e` for scientific notation) or a recognized CSS unit. If it instead finds an unexpected letter like `n`, it raises this error. This can happen in several ways:

- **Missing units:** Writing `left: 10;` instead of `left: 10px;`. The CSS specification requires a unit for all non-zero length values. While some browsers may interpret unitless numbers in quirks mode, this is invalid CSS and produces unpredictable results across browsers.
- **Typos in units:** Writing something like `left: 10n;` or `left: 10xp;` where the intended unit was `px` but a typo introduced invalid characters.
- **Template or scripting artifacts:** Dynamically generated values like `left: {{offset}}px;` that weren't properly resolved, leaving non-numeric characters in the output.
- **Using `calc()` incorrectly:** Writing `left: 10 + 5px;` instead of `left: calc(10px + 5px);`.

The `left` property accepts the following value types:

- **Lengths:** A number followed by a unit such as `px`, `em`, `rem`, `vw`, `vh`, `ch`, etc. (e.g., `left: 10px;`)
- **Percentages:** A number followed by `%` (e.g., `left: 50%;`)
- **Keywords:** `auto`, `inherit`, `initial`, `unset`, or `revert`
- **Functions:** `calc()`, `min()`, `max()`, `clamp()`, etc.
- **Zero:** The value `0` is the only number that does not require a unit.

Invalid CSS not only triggers validation errors but can cause layout issues. Browsers may ignore the entire declaration, falling back to the default value, which can break your intended positioning. Ensuring valid CSS improves cross-browser consistency and maintainability.

## Examples

### Missing unit (triggers the error)

```html
<div style="position: absolute; left: 10;">
  Positioned element
</div>
```

The validator reads `10` and then encounters the `;` (or in other cases a stray letter like `n`), which is not a valid part of a CSS length value.

### Typo in unit (triggers the error)

```html
<div style="position: absolute; left: 10xn;">
  Positioned element
</div>
```

### Fixed with a valid length unit

```html
<div style="position: absolute; left: 10px;">
  Positioned element
</div>
```

### Fixed with a percentage

```html
<div style="position: absolute; left: 50%;">
  Positioned element
</div>
```

### Fixed with the `auto` keyword

```html
<div style="position: absolute; left: auto;">
  Positioned element
</div>
```

### Fixed with `calc()`

```html
<div style="position: absolute; left: calc(50% - 20px);">
  Positioned element
</div>
```

### Zero without a unit (valid)

```html
<div style="position: absolute; left: 0;">
  Positioned element
</div>
```

Always double-check that every non-zero numeric value for `left` (and other length-based properties like `top`, `right`, `bottom`, `width`, `margin`, etc.) includes a valid CSS unit. If you're generating styles dynamically, verify that template variables resolve to proper values before rendering.