HTML Guide

CSS: “gap”: “auto” is not a “gap” value.

The gap property in CSS does not accept auto as a valid value.

The gap property is used with CSS Grid and Flexbox layouts to define the spacing between grid tracks or flex items. Acceptable values for gap include length values such as px, em, %, or keywords such as normal. The value auto is not valid for the gap property; instead, use valid length units or the normal keyword.

Correct usage:

<div style="display: grid; gap: 16px;">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Incorrect usage (produces a validation error):

<div style="display: grid; gap: auto;">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

For responsive or dynamic spacing, set the gap property to a valid length (e.g., 1rem, 10px, 5%) or use media queries to adjust spacing at different breakpoints.

Learn more:

MDN Web Docs: gap

Related W3C validator issues

Bad value “auto” for attribute “height” on element “video”: Expected a digit but saw “a” instead.

The height attribute on the <video> element must be a non-negative integer representing the height in CSS pixels. The value “auto” is not a valid value for this attribute. To resolve the issue, set the height attribute to a specific numeric value or adjust the height using CSS instead.

Example with a numeric height value:

<video width="640" height="360" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Alternatively, control the height using CSS:

<video width="640" controls style="height: auto;">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

In the CSS approach, “auto” can be used, but it should not be part of the HTML attributes.

Bad value “auto” for attribute “height | weight” on element “img”: Expected a digit but saw “a” instead.

The width and height attributes on <img> elements expect a digit to specify the dimension in pixels. It should not contain units, letters or percent signs.

You can achieve this using CSS instead, for example:

<!-- Invalid syntax, the height attribute expects only digits -->
<img src="photo.jpg" alt="cat" height="auto" />

<!-- Valid syntax using CSS -->
<img src="photo.jpg" alt="cat" style="height: auto"  />

Bad value “auto” for attribute “sizes” on element “img”: Bad CSS number token: Expected a minus sign or a digit but saw “a” instead at “auto”.

The sizes attribute specifies the size of the image when it is displayed on different devices.

The error message is saying that the value auto is not a valid value for the sizes attribute.

To fix this issue, you need to replace the value auto with a valid size. You can use a width descriptor or a media query to specify the size for different device widths.

Here’s an example of using a width descriptor:

<img src="example.jpg" sizes="(max-width: 600px) 100vw, 50vw" />

This example sets the size of the image to 100% of the viewport width when the device width is less than or equal to 600px, and 50% of the viewport width for larger device widths.

Alternatively, you can remove the sizes attribute altogether and let the browser decide the best size for the image based on the viewport size.

<img src="example.jpg" />

If you do this, the browser will use the default sizes value of 100vw and will scale the image accordingly.

Bad value “auto” for attribute “width” on element “img”: Expected a digit but saw “a” instead.

The width attribute on the img element must be a positive integer representing the number of pixels.

The HTML img element’s width and height attributes are expected to specify image dimensions in pixels. According to the HTML Living Standard, these attributes accept only non-negative integers. These integers define the rendered dimension of the image, overriding the actual image size based on its native resolution. The value “auto” is not a valid integer, which leads to the validation error you’ve encountered.

Here is a correct usage example of the img element:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Valid Image Width</title>
</head>
<body>
  <img src="example.jpg" alt="Example image" width="200" height="100">
</body>
</html>

In the example above, the width is set to 200, and the height is set to 100. Both values are non-negative integers representing pixel dimensions. If you intend to maintain the image’s aspect ratio while adjusting another dimension, you can omit one of the attributes, and modern browsers will automatically adjust the aspect ratio based on the given dimension.

Bad value “auto” for attribute “width” on element “video”: Expected a digit but saw “a” instead.

The error message is indicating that the width attribute of the <video> element has an invalid value. According to the HTML specification, the width attribute expects a non-negative integer value, representing the pixel width of the video.

The value "auto" is not valid for the width attribute. Instead, specify a full number that indicates the pixel width of the video. If you want the video to be responsive without specifying a fixed width, you can use CSS to achieve that.

Here are two ways to resolve this:

Specify a valid pixel value for width:

<video width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Use CSS for a responsive video player:

Instead of using the width attribute, use CSS to set the width of the video element. This allows the video to adjust its size according to the container or viewport.

<style>
  .responsive-video {
    width: 100%;
    height: auto;
  }
</style>

<video class="responsive-video" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

In the second example, the video will scale based on its containing element, maintaining its aspect ratio due to the height: auto; CSS rule. This approach offers more flexibility for responsive design.

CSS: “background-blend-mode”: X is not a “background-blend-mode” value.

background-blend-mode only accepts certain keywords as values, such as normal, multiply, screen, and others.

The background-blend-mode property in CSS specifies how background images and background colors blend together. Its value must be one or more blend mode keywords defined by CSS, for example, normal, multiply, screen, overlay, etc. Using an unrecognized value will generate a validation error.

Valid values include:

normal
multiply
screen
overlay
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion
hue
saturation
color
luminosity

Example of an invalid value:

/* Invalid: 'X' is not a recognized value */
background-blend-mode: X;

Example of a valid value:

/* Valid: 'multiply' is a recognized blend mode */
background-blend-mode: multiply;

Example HTML with correct CSS property:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Background Blend Mode Example</title>
  <style>
    .blended-bg {
      background-image: url('image1.jpg'), url('image2.jpg');
      background-blend-mode: overlay;
    }
  </style>
</head>
<body>
  <div class="blended-bg" style="width:200px; height:200px;">
    Blended background
  </div>
</body>
</html>

Replace any invalid values for background-blend-mode in your CSS with one of the supported keywords.

CSS: “background-image”: X is not a “background-image” value.

background-image attribute values must use valid CSS syntax.

The background-image property in CSS expects the value to be a valid image reference, such as none, url("image.png"), gradients, or inherit.

Correct CSS Syntax:

background-image: url("background.jpg");

Correct usage in HTML (inline style):

<div style="background-image: url('background.jpg');">
  Content here
</div>

Incorrect usage (missing url() or filename only):

<div style="background-image: background.jpg;">
  Content here
</div>

Correct usage in a <style> block:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Background Image Example</title>
    <style>
      .banner {
        background-image: url("banner.png");
      }
    </style>
  </head>
  <body>
    <div class="banner">Welcome</div>
  </body>
</html>

Always wrap the image path with the url() function and use quotes for paths containing special characters.

CSS: “background”: X is not a “background-color” value.

There’s an invalid value for the background property in your CSS. The W3C HTML Validator has attempted to match the value to a background color, without success.

Here’s how to resolve this issue:

Identify the Correct CSS Configuration: The background property in CSS can take various forms, such as a color, an image, or a combination of background components. Ensure you provide a valid value.
Correct the Value: If you meant to set a background color, use a valid color format (e.g., hexadecimal, RGB, RGBA, named color, etc.).

Valid CSS Examples:

Using a named color:
```
.example {
  background: blue;
}
```
Using a hexadecimal color:
```
.example {
  background: #00ff00;
}
```

Using an RGB color:

.example {
  background: rgb(255, 0, 0);
}

Using an RGBA color (with transparency):

.example {
  background: rgba(255, 0, 0, 0.5);
}

Setting an image as background:

.example {
  background: url('image.jpg');
}

Combining multiple background properties:

.example {
  background: url('image.jpg') no-repeat center/cover;
}

CSS: “border-radius”: X is not a “border-radius” value

The value specified for the border-radius CSS property is not valid.

The border-radius property expects a valid length or percentage value (like 5px, 10%, etc.). Using a CSS variable only works if the variable is properly defined in a CSS rule somewhere in the document, and the HTML is interpreted by a browser that supports CSS custom properties.

For example, if you write:

<div style="border-radius: var(--my-border-radius);"></div>

but never define --my-border-radius, it triggers an error.

Solution:

Define the CSS variable before using it, or use a fixed value instead.

Example 1: Using a fixed value

<div style="border-radius: 8px;"></div>

Example 2: Defining the variable in CSS

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>CSS Variable Border Radius Example</title>
    <style>
      :root {
        --my-border-radius: 8px;
      }
      .rounded {
        border-radius: var(--my-border-radius);
      }
    </style>
  </head>
  <body>
    <div class="rounded">Border radius via variable</div>
  </body>
</html>

Using custom properties in inline style attributes is valid in modern browsers if the variable is defined, but some validators may flag it if they can’t resolve the variable. For best validator compatibility, use static, valid CSS values.

CSS: “border-style”: “thick” is not a “border-style” value.

border-style does not accept thick as a value; it should be set to values like solid, dashed, or dotted, while thick is a valid border-width value.

The CSS property border-style determines the style of the border, such as whether it is solid, dashed, double, etc.

Acceptable values include none, hidden, dotted, dashed, solid, double, groove, ridge, inset, and outset. The keyword thick is not valid for border-style; instead, it can be used with border-width to indicate a thicker border.

To achieve a thick solid border, set border-style to solid and border-width to thick.

Incorrect HTML Example:

<div style="border-style: thick;"></div>

Correct HTML Example:

<div style="border-style: solid; border-width: thick;"></div>

Or, if you want to specify a custom thickness:

<div style="border-style: solid; border-width: 5px;"></div>

The combination ensures that the border both displays in a solid style and is rendered at the desired thickness.