About This HTML Issue
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
-
Round the value to the nearest whole number. Use standard rounding rules: round up if the decimal portion is
.5or greater, round down otherwise. - Remove any decimal point and trailing digits from the attribute value.
-
If you need precise, fractional dimensions, use CSS instead of HTML attributes. CSS
widthandheightproperties accept decimal values with units (e.g.,602.88px).
Examples
❌ Invalid: decimal values in width and height
<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
<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:
<iframe src="example.html" style="height: 602.88px; width: 800.2px;"></iframe>
Or, better yet, use an external stylesheet:
<iframe src="example.html" class="content-frame"></iframe>
.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:
<iframe src="example.html" width="800px" height="600px"></iframe>
✅ Fixed: remove the units
<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.
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.