HTML Guide

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;
}

The padding CSS shorthand property sets the padding area on all four sides of an element at once.

To specify no padding, use padding: 0 instead of padding: none.

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;
}

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;
}

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;
}

Padding properties, unline margin properties, don’t accept negative values.

CSS styles could not be parsed, check the indicated line to find what caused the parser to fail. Common causes are unclosed curly brackets or comments, missing semicolons or unexpected or empty properties.

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.

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)

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;

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;

The value break-word for the property word-break is deprecated, you should replace it with a valid value.

According to the CSS Text Module Level 3 spec:

For compatibility with legacy content, the word-break property also supports a deprecated break-word keyword. When specified, this has the same effect as word-break: normal and overflow-wrap: anywhere, regardless of the actual value of the overflow-wrap property.

The value specified for the transform CSS attribute is not valid.

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

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;

The ::file-selector-button has not been recognized by the W3C Validator. This seems to be a bug in the W3C Validator, which has already been reported.

The ::ng-deep CSS selector is often used in an Angular Component’s CSS to override the styles of a third-party component or a child component’s styles.

This CSS selector is now deprecated.

The @container CSS at-rule is a conditional group rule that applies styles to a containment context. The @container at-rule is a recent addition to CSS which isn’t officially a standard rule instead, although widely supported by major browsers.

Check the linked guides to learn more about browser compatibility for this rule.

The @tailwind at-rule defined by the Tailwind CSS framework isn’t officialy supported by the W3C Validator.

Tailwind directives are custom Tailwind-specific at-rules you can use in your CSS that offer special functionality for Tailwind CSS projects.

Although they’re valid directives for Tailwind, they’re not valid from the W3C Validator perspective. You can consider muting this issue in your Rocket Validator Pro reports.

The value specified for a width attribute in CSS is not valid.

The width CSS property sets an element’s width. There are many allowed values for this attribute, for example:

/* <length> values */
width: 300px;
width: 25em;

/* <percentage> value */
width: 75%;

/* Keyword values */
width: max-content;
width: min-content;
width: fit-content(20em);
width: auto;

/* Global values */
width: inherit;
width: initial;
width: revert;
width: unset;

CSS can’t be properly processed because a computed style is missing a value it depends on.

CSS properties need to be separated by semicolons. Check for the missing semicolon between properties.

In the example below, a forgotten semicolon before the content property makes the CSS parser unable to understand the properties:

<style>
nice {
  z-index: auto 
  content: ""; 
  display: block; 
}
</style>

Fix it by including the forgotten semicolon like this:

<style>
nice {
  z-index: auto;
  content: ""; 
  display: block; 
}
</style>

A CSS definition for an X property could not be understood by the parser. Check it to ensure that it’s well formed and that it contains an appropriate value.

The specified CSS property is not valid.

The value specified in a custom CSS property has an unknown or unsupported dimension value.

This is a warning that a special character in the Unicode Private Use Area is being used at the document, which might cause it to not work the way you might expect in different browsers/environments.

If you’ve checked the document in different browsers and it’s working fine, you can safely ignore this warning.

What are private-use characters in Unicode?

Private-use characters are code points whose interpretation is not specified by a character encoding standard and whose use and interpretation may be determined by private agreement among cooperating users. Private-use characters are sometimes also referred to as user-defined characters (UDC) or vendor-defined characters (VDC).