HTML Guide

CSS: “grid-template-columns”: X is not a “grid-template-columns” value.

There’s an invalid value for the grid-template-columns property. According to the CSS Grid Layout Module, the grid-template-columns property is used to define the column structure of a grid container by specifying the size of each column.

Valid values for grid-template-columns include:

Lengths such as px, em, rem, %, vh, vw, and more (e.g., 100px).
Fractions using the fr unit, which allocates space in fractions of the available space (e.g., 1fr 2fr).
The repeat() function (e.g., repeat(3, 1fr)).
Keywords like auto, min-content, max-content.
Any combination of the above.

Here’s an example:

Incorrect CSS:

<style>
  .grid-container {
    display: grid;
    grid-template-columns: undefined; /* This will cause an error. */
  }
</style>

Correct CSS:

<style>
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    /* This creates a grid with two columns, the first takes up one fraction and the second two fractions of the available space. */
  }
</style>

Related W3C validator issues

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: “font”: X is not a “font-family” value.

The font property should be used to set font-related attributes like font-style, font-variant, font-weight, font-size, line-height, and font-family. If you’re only trying to set font-weight, use the font-weight property instead.

Correct usage:

font-weight: 300; /* Correct syntax for setting font weight */

If you want to set multiple font properties at once, use the font shorthand correctly:

font: 300 16px/1.5 "Helvetica", sans-serif; /* font-weight font-size/line-height font-family */

Ensure that the font-family part is specified and valid.

CSS: “grid-column”: X is not a “grid-column” value.

The issue you’re encountering pertains to the use of the grid-column property in CSS, which is part of the CSS Grid Layout module. The grid-column property is typically used to specify how elements are placed along the grid columns in a grid layout.

The grid-column property is a shorthand for specifying both the starting grid line and the ending grid line for a grid item in order to define its horizontal position in the grid. The correct way to use it generally involves setting either a specific line number or a span value.

Syntax

The basic syntax for the grid-column property is:

grid-column: <start-line> / <end-line>;

<start-line>: The grid line where the item starts. This can be a line number, a named grid line, or a span keyword.
<end-line>: The grid line where the item ends. Similarly, this can also be a line number, a named grid line, or use span to indicate spanning across a number of lines.

Common Usage

Specific Lines: Specify the starting and ending lines explicitly.
```
grid-column: 2 / 4;
```
This would place the item starting from line 2 and ending before line 4.
Spanning Columns: Use the span keyword to define how many columns you want the item to span.
```
grid-column: 1 / span 2;
```
This would start the item at line 1 and span two columns.

Issue with grid-column: 0

The value 0 is invalid for grid-column because grid lines in CSS Grid Layout are indexed starting from 1. Attempting to use 0 implies a non-existent line and therefore results in an invalid value error.

Correcting the Issue

Determine which grid line your item should start from and which line it should end on, using valid line numbers or span values.
Update your CSS to use valid grid lines:
```
/* Correct usage example: */
.grid-item {
  grid-column: 1 / span 2;
}
```
Here, the grid item starts at line 1 and spans across 2 columns.

Ensure that your grid layout is properly set up with the desired number of rows and columns so that you can appropriately set valid grid-column values.

CSS: “grid-template-rows”: X is not a “grid-template-rows” value.

The specified value for the grid-template-rows property is not valid. This CSS property specifies the height of each row in a CSS grid layout.

Correct Usage of grid-template-rows

The grid-template-rows property accepts several types of values:

Length values (e.g., px, em, rem):
```
grid-template-rows: 100px 200px;
```
Percentages:
```
grid-template-rows: 50% 50%;
```
Flexible units (fr):
```
grid-template-rows: 1fr 2fr;
```
Auto keyword:
```
grid-template-rows: auto auto;
```
Repeat function:
```
grid-template-rows: repeat(3, 1fr);
```

Minmax function:

grid-template-rows: minmax(100px, 200px) auto;

Example

Here’s an example where we define two rows, one with a height of 100px and the other one of 200px.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Example of grid-template-rows</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .grid-container {
      display: grid;
      grid-template-rows: 100px 200px;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div>Row 1</div>
    <div>Row 2</div>
  </div>
</body>
</html>

CSS: “letter-spacing”: “NaNrem” is not a “letter-spacing” value.

The CSS letter-spacing property controls the space between characters in text. The error you’re encountering indicates that an invalid value is being specified for this property. Specifically, NaNrem (where NaN stands for “Not-a-Number”) is not a valid numeric value.

Explanation

In CSS, letter-spacing can be defined using various units, such as:

Length units like px, em, rem, etc.
Keywords like normal.

However, these values need to be real numbers, not NaN, which indicates a computational error likely from JavaScript or during dynamic style generation.

Example of Correct Usage

If you want to set the letter spacing to a specific value, ensure it’s a valid number. For instance, to set a 0.1 rem spacing:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Correct Letter Spacing</title>
  <style>
    .text {
      letter-spacing: 0.1rem;
    }
  </style>
</head>
<body>
  <p class="text">This is a sample text with correct letter spacing.</p>
</body>
</html>

Troubleshooting Steps

Check the CSS Source: Look at where letter-spacing is being set in your CSS and ensure you are using a valid number.
Review JavaScript Calculations: If the value is coming from JavaScript, ensure that calculations do not result in NaN. This could happen if you divide by zero or use undefined variables.

// Example of avoiding NaN
let spacing = 2; // Ensure this is a valid number
document.querySelector('.text').style.letterSpacing = `${spacing}rem`;

Default Fallback: Use a conditional check or default fallback in JavaScript to prevent NaN.

let spacingValue = calculateSpacing() || 0.1; // Use 0.1 rem as fallback
document.querySelector('.text').style.letterSpacing = `${spacingValue}rem`;

By resolving these issues, the error should be corrected and the text will render with proper letter-spacing settings.

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: “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: “vertical-align”: “none” is not a “vertical-align” value.

The value none is not a valid value for the vertical-align CSS property.

The vertical-align property in CSS is used to specify the vertical alignment of an inline or table-cell element. This property affects the alignment of elements that are placed next to each other in a line. Valid values for vertical-align include keywords like baseline, sub, super, text-top, text-bottom, middle, top, bottom, as well as length values (such as px, em) and percentage values. The value none is not recognized as a valid option for vertical-align, which is why the validator reports an issue.

Below are examples using valid values for the vertical-align property:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Valid Vertical Align</title>
    <style>
      .aligned-text {
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td style="vertical-align: top;">Top</td>
        <td class="aligned-text">Middle</td>
        <td style="vertical-align: bottom;">Bottom</td>
      </tr>
    </table>
  </body>
</html>

In the above example, each table cell is using a valid vertical-align value (top, middle, and bottom) to control vertical alignment. If you replace vertical-align: none; with one of these values according to your design requirements, your code will validate correctly.