HTML Guide · Rocket Validator

The CSS property padding-block does not accept auto as a value. The padding-block property is used to set the padding on the block-level start and end sides of an element, and it expects length values (like px, em, %, etc.) or global values like inherit, initial, revert, revert-layer, unset.

Here’s how you can fix this issue by providing valid values for the padding-block property.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Padding Block Example</title>
  <style>
    .example {
      /* Incorrect use of 'auto' */
      /* padding-block: auto; */

      /* Correct use of padding-block with length values: */
      padding-block: 20px 10px;

      /* You can also use single value for same padding on both sides: */
      /* padding-block: 15px; */

      /* Or use percentage values: */
      /* padding-block: 2% 1%; */
      /* Or inherit, initial, revert, unset */
      /* padding-block: inherit; */
    }
</style>
</head>
<body>
  <div class="example">
    This is an example demonstrating correct use of padding-block.
  </div>
</body>
</html>

Explanation:

Length values: You can specify the padding using absolute units like px, em, rem, etc. In the example above, padding-block: 20px 10px; applies 20px padding to the block-start and 10px to the block-end.
Single Length Value: Using padding-block: 15px; applies the same padding (15px) to both block-start and block-end.
Percentage values: padding-block: 2% 1%; will apply 2% of the containing block’s size to block-start and 1% to block-end.
Global values: You can also use inherit, initial, revert, revert-layer, or unset to control CSS inheritance and initial values.

CSS: “padding-bottom”: “px” is not a “padding-bottom” value.

The padding-bottom property in CSS requires a numerical value followed by a unit. For example, pixels (px), percentages (%), em units (em), etc. Setting padding-bottom: px without a number is invalid.

To fix the issue, specify a numerical value before the unit. Here’s how you can correct this:

Example of incorrect HTML with inline CSS:

<div style="padding-bottom: px;">Content</div>

Corrected HTML with inline CSS:

<div style="padding-bottom: 10px;">Content</div>

In the above example, 10px is a valid value.

Alternatively, if using an external CSS file, the incorrect CSS might look like this:

.example {
  padding-bottom: px;
}

Correct the external CSS by specifying a numerical value:

.example {
  padding-bottom: 10px;
}

CSS: “padding-left”: “px” is not a “padding-left” value.

The padding-left property in CSS requires a numerical value followed by a unit. For example, pixels (px), percentages (%), em units (em), etc. Setting padding-left: px without a number is invalid.

To fix the issue, specify a numerical value before the unit. Here’s how you can correct this:

Example of incorrect HTML with inline CSS:

<div style="padding-left: px;">Content</div>

Corrected HTML with inline CSS:

<div style="padding-left: 10px;">Content</div>

In the above example, 10px is a valid value.

Alternatively, if using an external CSS file, the incorrect CSS might look like this:

.example {
  padding-left: px;
}

Correct the external CSS by specifying a numerical value:

.example {
  padding-left: 10px;
}

CSS: “padding”: “none” is not a “padding” value.

CSS: “padding”: “px” is not a “padding” value.

css
padding

The padding property in CSS requires a numerical value followed by a unit. For example, pixels (px), percentages (%), em units (em), etc. Setting padding: px without a number is invalid.

To fix the issue, specify a numerical value before the unit. Here’s how you can correct this:

Example of incorrect HTML with inline CSS:

<div style="padding: px;">Content</div>

Corrected HTML with inline CSS:

<div style="padding: 10px;">Content</div>

In the above example, 10px is a valid value.

Alternatively, if using an external CSS file, the incorrect CSS might look like this:

.example {
  padding: px;
}

Correct the external CSS by specifying a numerical value:

.example {
  padding: 10px;
}

CSS: “padding-right”: X negative values are not allowed.

The CSS property padding-right is used to set the padding space on the right side of an element. According to the CSS specification, padding values must be non-negative, meaning that negative values are not allowed for any of the padding properties.

To resolve the issue, remove the negative value. If you are trying to adjust the layout or spacing, consider using other CSS properties that allow negative values, such as margin. Here’s how you can fix this:

Example Before Fix

.example {
  padding-right: -9px; /* This is incorrect */
}

Example After Fix

.example {
  padding-right: 0; /* Set to zero or a positive value */
  /* If adjustment is needed, consider using margin */
  margin-right: -9px;
}

Explanation:

Padding: The padding-right property specifies the space between the content of the element and its border on the right side. This space cannot be negative.
Margin: If you’re trying to create an overlapping effect or reduce space externally, using margin-right with a negative value is permissible.

Evaluate the layout requirements and adjust the values appropriately, ensuring you respect the non-negative rule of padding properties.

CSS: “padding-right”: “px” is not a “padding-right” value.

The padding-right property in CSS requires a numerical value followed by a unit. For example, pixels (px), percentages (%), em units (em), etc. Setting padding-right: px without a number is invalid.

To fix the issue, specify a numerical value before the unit. Here’s how you can correct this:

Example of incorrect HTML with inline CSS:

<div style="padding-right: px;">Content</div>

Corrected HTML with inline CSS:

<div style="padding-right: 10px;">Content</div>

In the above example, 10px is a valid value.

Alternatively, if using an external CSS file, the incorrect CSS might look like this:

.example {
  padding-right: px;
}

Correct the external CSS by specifying a numerical value:

.example {
  padding-right: 10px;
}

CSS: “padding-top”: “px” is not a “padding-top” value.

The padding-top property in CSS requires a numerical value followed by a unit. For example, pixels (px), percentages (%), em units (em), etc. Setting padding-top: px without a number is invalid.

To fix the issue, specify a numerical value before the unit. Here’s how you can correct this:

Example of incorrect HTML with inline CSS:

<div style="padding-top: px;">Content</div>

Corrected HTML with inline CSS:

<div style="padding-top: 10px;">Content</div>

In the above example, 10px is a valid value.

Alternatively, if using an external CSS file, the incorrect CSS might look like this:

.example {
  padding-top: px;
}

Correct the external CSS by specifying a numerical value:

.example {
  padding-top: 10px;
}

CSS: “padding-top”: “-X” negative values are not allowed.

CSS: Parse Error.

CSS: “pointer-events”: “normal” is not a “pointer-events” value.

The issue you’re encountering is due to incorrect use of the pointer-events CSS property value. The W3C Validator indicates that normal is not a valid value for pointer-events.

How to Fix

The pointer-events property accepts specific valid values, and while “normal” is not one of them, the correct relevant value you likely intended to use is auto.

Valid Values for pointer-events

Here are the most common valid values for pointer-events:

/* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill; /* SVG only */
pointer-events: visibleStroke; /* SVG only */
pointer-events: visible; /* SVG only */
pointer-events: painted; /* SVG only */
pointer-events: fill; /* SVG only */
pointer-events: stroke; /* SVG only */
pointer-events: all; /* SVG only */

/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: revert;
pointer-events: revert-layer;
pointer-events: unset;

Example Fix

If your original CSS is like this:

<style>
  .my-element {
    pointer-events: normal; /* This is incorrect */
  }
</style>

You should change it to:

<style>
  .my-element {
    pointer-events: auto; /* This is correct */
  }
</style>

Summary

To resolve the W3C Validator issue, replace any occurrence of pointer-events: normal; with pointer-events: auto; or another appropriate value based on the desired behavior.

CSS: “px” is not a “width” value

The value px for a width property is incorrect, it should include both the value and the units, like 10px, or just 0 if it’s zero width. Using only the units without the value is incorrect.

Example of Incorrect CSS

<style>
  .example {
    width: 300; /* This is missing the unit */
  }
  .example2 {
    width: px; /* This is missing the value */
  }
</style>

Corrected Example of CSS

Make sure to include the unit (like px, em, %, etc.) when specifying the width:

<style>
  .example {
    width: 300px; /* Correctly includes 'px' unit */
  }
</style>

Conclusion

Always ensure to provide proper units when specifying dimensions in CSS. Common units are:

px (pixels)
em (relative to the font size of the element)
% (percentage of the parent element’s width)

CSS: “text-align”: X is not a “text-align” value.

The text-align property in CSS only accepts specific keywords such as left, right, center, justify, start, or end.

W3C validation errors like this occur when an unsupported value is used for the text-align property. Valid values for text-align are standard keywords or certain global values. Custom or invalid values (like middle, or arbitrary text) are not permitted and will trigger validation errors.

Valid examples of text-align:

<p style="text-align: left;">This text is left-aligned.</p>
<p style="text-align: right;">This text is right-aligned.</p>
<p style="text-align: center;">This text is centered.</p>
<p style="text-align: justify;">This text is justified.</p>

Invalid example:

<p style="text-align: middle;">This will fail validation.</p>

To resolve the issue, always use a valid keyword for text-align.

CSS: “text-overflow”: X is not a “text-overflow” value.

The text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis, or display a custom string.

This property may be specified using one or two values. If one value is given, it specifies overflow behavior for the end of the line (the right end for left-to-right text, the left end for right-to-left text). If two values are given, the first specifies overflow behavior for the left end of the line, and the second specifies it for the right end of the line.

Here are some examples:

text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";

/* Global values */
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: revert-layer;
text-overflow: unset;

CSS: “text-transform”: “X” is not a “text-transform” value.

The text-transform CSS property specifies how to capitalize an element’s text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.

Examples of valid values for this property are:

text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: full-width;
text-transform: full-size-kana;

CSS: The value “break-word” is deprecated

CSS: “transform”: Too many values or values are not recognized.

CSS: “transform”: X is not a “transform” value.

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

To fix this issue, check the syntax for the transform that you want to apply.

Here are some examples of valid values for this property:

/* Keyword values */
transform: none;

/* Function values */
transform: matrix(1, 2, 3, 4, 5, 6);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2, 3, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

/* Global values */
transform: inherit;
transform: initial;
transform: revert;
transform: revert-layer;
transform: unset;

CSS: “transition-delay”: “0” is not a “transition-delay” value.

Change the transition-delay value from 0 to 0s to specify a time unit.

CSS properties dealing with time, like transition-delay, require a time unit to be compliant with standards. The transition-delay property specifies when the transition effect will start after being triggered. Valid values for transition-delay include time values such as 100ms (milliseconds) or 0s (seconds). Specifying just 0 is not compliant because it lacks a time unit, which is why the validator flags this as an error.

Here is an example of how to correctly define transition-delay using proper time units in your CSS:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transition Delay Example</title>
  <style>
    .example {
      transition-delay: 0s; /* Correctly includes time unit */
      transition-property: opacity;
      transition-duration: 1s;
      opacity: 0;
    }

    .example:hover {
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="example">Hover over me!</div>
</body>
</html>

In this corrected example, the transition-delay is set to 0s, ensuring compliance with CSS standards by including the necessary time unit.

CSS: Unknown pseudo-element or pseudo-class “::file-selector-button”.

CSS: Unknown pseudo-element or pseudo-class “::ng-deep”.

CSS: Unrecognized at-rule “@container”

css
at-rule

CSS: Unrecognized at-rule “@tailwind”