# Bad value “%” for attribute “width” or “height” on element “object”: Expected a digit but saw “%” instead.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-x-for-attribute-width-or-height-on-element-object-expected-a-digit-but-saw-percentage-instead
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

According to the [HTML Living Standard](https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-object-element), the `width` and `height` attributes on the `<object>` element accept only valid non-negative integers — plain numbers representing pixels, such as `600` or `400`. The validator expects each character in the value to be a digit (0–9). When it encounters a `%` sign, it reports "Expected a digit but saw '%' instead."

This is different from some legacy HTML 4 behavior where certain elements accepted percentage values in dimension attributes. In modern HTML, the `<object>` element's dimension attributes are strictly pixel-only. The same restriction applies to elements like `<img>`, `<video>`, and `<canvas>`.

### Why this matters

- **Standards compliance:** Browsers may still render percentage values in these attributes, but the behavior is not defined by the specification and cannot be relied upon across browsers or future versions.
- **Predictable rendering:** Pixel values in attributes give the browser a concrete intrinsic size for the object, which helps with layout calculations and prevents content reflow as the page loads.
- **Accessibility and tooling:** Assistive technologies and other tools that parse HTML rely on well-formed attribute values. Invalid values may cause unexpected behavior.

### How to fix it

You have two options:

1. **Use pixel values in the attributes** if you know the exact dimensions you need.
2. **Use CSS** if you need percentage-based or responsive sizing. Remove the `width` and `height` attributes (or set them to pixel fallback values) and apply CSS `width` and `height` properties instead.

When using CSS for `100%` height, remember that percentage heights require the parent elements to also have a defined height. This typically means setting `height: 100%` on `html` and `body` as well.

## Examples

### ❌ Invalid: percentage values in attributes

```html
<object data="example.pdf" type="application/pdf" width="100%" height="100%"></object>
```

The validator flags both `width="100%"` and `height="100%"` because `%` is not a digit.

### ✅ Fixed: pixel values in attributes

```html
<object data="example.pdf" type="application/pdf" width="600" height="400"></object>
```

Plain integer values are valid and give the object a fixed size in pixels.

### ✅ Fixed: percentage sizing with CSS

```html
<object
  data="example.pdf"
  type="application/pdf"
  style="width: 100%; height: 500px;">
</object>
```

Using inline CSS allows you to mix units freely, including percentages, `vh`, `em`, and more.

### ✅ Fixed: full-page object with CSS

When you need the `<object>` to fill the entire viewport, use a stylesheet to set heights on the ancestor elements:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Full-Page Object Example</title>
  <style>
    html, body {
      height: 100%;
      margin: 0;
    }
    object {
      display: block;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <object data="example.pdf" type="application/pdf"></object>
</body>
</html>
```

This approach is fully valid, responsive, and gives you much more control over sizing than HTML attributes alone.
