HTML Guide - issues tagged as CSS

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.

CSS: “white-space”: X is not a “white-space” value.

Invalid values have been assigned to the white-space CSS property.

The white-space property in CSS controls how whitespace and line breaks inside an element are handled. Only specific values are valid for this property. According to the CSS specification, valid values for white-space include:

/* Single keyword values */
white-space: normal;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;

/* white-space-collapse and text-wrap-mode shorthand values */
white-space: wrap;
white-space: collapse;
white-space: preserve nowrap;

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

CSS: “width”: The types are incompatible.

CSS
width

Using the width attribute with an invalid value or on an element where it’s not allowed causes a “types are incompatible” error.

The width attribute must only be used on certain elements, like img, canvas, input (of type image), or video. Its value should be a valid integer, representing the number of CSS pixels, without units. Using CSS units like px or % directly in the attribute, or placing the attribute on unsupported elements, will trigger this validation message.

Correct usage:

<img src="photo.jpg" width="400" alt="Sample photo">

Incorrect usage (with units):

<img src="photo.jpg" width="400px" alt="Sample photo">

Incorrect usage (on unsupported element):

<div width="400">Content</div>

To set width via CSS instead, use the style attribute or an external stylesheet:

<div style="width: 400px;">Content</div>

For styling, always use CSS when possible; reserve the width attribute for the few HTML elements that specifically support it, and ensure the value is a simple number without units.