# Bad value X for attribute “(width | height)” on element “iframe”: Expected a digit but saw “.” instead.

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

According to the HTML specification, the `width` and `height` attributes on `<iframe>` elements accept only a **valid non-negative integer** — a string of one or more ASCII digits (`0`–`9`) with no decimal points, spaces, or unit suffixes like `px`. This is different from CSS, where properties like `width` and `height` accept decimal values and units. The HTML attributes represent dimensions in CSS pixels implicitly, so only bare whole numbers are allowed.

When the W3C validator reports *"Expected a digit but saw '.' instead"*, it means it was parsing the attribute value character by character and encountered a period (`.`) where only digits are valid. This typically happens when authors copy computed or fractional values from design tools, JavaScript calculations, or CSS into HTML attributes.

### Why this matters

- **Standards compliance**: Browsers may handle invalid attribute values inconsistently. While most modern browsers will parse and truncate decimal values gracefully, the behavior is not guaranteed and falls outside the specification.
- **Predictable rendering**: Relying on how browsers handle malformed values can lead to subtle differences across browser engines. Using valid integers ensures consistent behavior everywhere.
- **Code quality**: Clean, valid markup is easier to maintain and signals professionalism, which matters especially for shared codebases and collaborative projects.

### How to fix it

1. **Round the value** to the nearest whole number. Use standard rounding rules: round up if the decimal portion is `.5` or greater, round down otherwise.
2. **Remove any decimal point and trailing digits** from the attribute value.
3. If you need precise, fractional dimensions, use **CSS** instead of HTML attributes. CSS `width` and `height` properties accept decimal values with units (e.g., `602.88px`).

## Examples

### ❌ Invalid: decimal values in `width` and `height`

```html
<iframe src="example.html" height="602.88" width="800.2"></iframe>
```

The validator will flag both attributes because `602.88` and `800.2` contain a `.` character.

### ✅ Fixed: whole number values

```html
<iframe src="example.html" height="603" width="800"></iframe>
```

The decimal values have been rounded to the nearest integer: `602.88` becomes `603`, and `800.2` becomes `800`.

### ✅ Alternative: use CSS for precise dimensions

If you need exact fractional dimensions, move the sizing to CSS and remove the HTML attributes entirely:

```html
<iframe src="example.html" style="height: 602.88px; width: 800.2px;"></iframe>
```

Or, better yet, use an external stylesheet:

```html
<iframe src="example.html" class="content-frame"></iframe>
```

```css
.content-frame {
  width: 800.2px;
  height: 602.88px;
}
```

### ❌ Invalid: other non-digit characters

This error can also appear if you include units in the attribute value:

```html
<iframe src="example.html" width="800px" height="600px"></iframe>
```

### ✅ Fixed: remove the units

```html
<iframe src="example.html" width="800" height="600"></iframe>
```

The same rule applies to the `<img>`, `<video>`, `<canvas>`, and other elements that accept `width` and `height` as HTML attributes — they all expect valid non-negative integers without decimals or units.