About This HTML Issue
According to the HTML Living Standard, 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:
- Use pixel values in the attributes if you know the exact dimensions you need.
-
Use CSS if you need percentage-based or responsive sizing. Remove the
widthandheightattributes (or set them to pixel fallback values) and apply CSSwidthandheightproperties 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
<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
<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
<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:
<!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.
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.