HTML Guide
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.
Learn more:
Related W3C validator issues
The autocomplete attribute on an input, textarea, select or form element lets web developers specify how autocompleting should be handled.
The value none is not valid, instead the value off should be used to disable autocompletion.
Here is an example of how you can adjust your HTML code:
Incorrect usage:
<input type="text" name="username" autocomplete="none">Correct usage: If you want to disable autofill for an input field, you can use the value off instead of none:
<input type="text" name="username" autocomplete="off">The attribute value is either the keyword off or on, or a space-separated token list that describes the meaning of the autocompletion value, for example name, email, postal-code and others. Refer to the linked guide to see the full list of accepted values for the autcomplete property.
The text-anchor attribute is used within SVG elements like text or textPath to specify the alignment of text relative to a given point, but it’s not allowed on g container elements.
Here’s an example of how you can correctly use the text-anchor attribute on a <text> element in SVG:
<svg width="200" height="200">
<text x="100" y="100" text-anchor="middle">Centered text</text>
</svg>In this example:
- The text-anchor="middle" attribute is applied directly to the <text> element.
- It aligns the text in the middle horizontally around the specified x-coordinate.
You can use the text-anchor element with the SVG elements text, textPath, tref or tspan.
The allowed values for the text-anchor attribute are start, middle or end. The value none is not valid for this attribute.
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.
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.
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; }
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.
The border property in your CSS has too many values or uses incorrect values.
According to the CSS specification, the shorthand border property accepts the following, in any order: border-width, border-style, and border-color, but each should occur at most once and be a valid value.
Common mistakes:
- Adding extra values, such as two widths or two colors.
- Using an invalid border-style.
- Misspelling keywords.
Correct syntax:
selector {
border: border-width border-style border-color;
}- border-width: e.g., 1px, thin, 0
- border-style: e.g., solid, dashed, none
- border-color: e.g., #ff0, red, rgb(255,0,0)
Valid examples:
/* Valid shorthand: width, style, color */
div {
border: 2px solid black;
}
p {
border: thin dashed #00f;
}
section {
border: 0 none;
}Make sure your border property contains at most one valid value each for width, style, and color, and not more than three total.
border-width in CSS accepts specific keywords (thin, medium, thick) or valid length values (px, em, etc.).
The border-width property controls the thickness of a border around an element, and only accepts values such as length units (like 2px, 0.5em, 3pt) or the keywords: thin, medium, and thick. Using any other value (such as an unsupported unit or a misspelled keyword) will generate a validator error. Check your CSS for border widths that use incorrect or unsupported values.
Example of incorrect usage:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Invalid border-width Example</title>
<style>
.box {
border-style: solid;
border-width: large; /* invalid: "large" is not allowed */
}
</style>
</head>
<body>
<div class="box">Invalid border-width</div>
</body>
</html>Example of correct usage:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Valid border-width Example</title>
<style>
.box {
border-style: solid;
border-width: 5px; /* valid: uses "px" unit */
}
</style>
</head>
<body>
<div class="box">Valid border-width</div>
</body>
</html>Permitted values for border-width include:
- Length units: px, em, rem, pt, etc.
- Keywords: thin, medium, thick
Example with keywords:
<div style="border-style: solid; border-width: thick;">
Thick border with keyword
</div>Replace any invalid value with a valid length or one of the accepted keywords to resolve the validation error.
The value provided for the box-shadow CSS property is invalid.
The box-shadow property requires a valid set of length, color, and optionally other parameters to describe shadow effects on elements. A typical box-shadow value must specify horizontal and vertical offsets, and may include blur radius, spread radius, and color, in that order. Syntax errors such as missing units, wrong order, or invalid keywords will trigger validation errors.
Correct syntax:
box-shadow: <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>?;- <offset-x> and <offset-y> are required and must use valid CSS length units (like px, em, rem).
- <blur-radius>, <spread-radius>, and <color> are optional.
- Multiple shadows can be comma-separated.
Example of invalid usage:
<div style="box-shadow: 10 10;">Invalid box-shadow</div>In this example, the values 10 10 are missing units (px).
Example of a valid, W3C-compliant usage:
<div style="box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);">
Valid box-shadow
</div>Example with multiple shadows:
<div style="box-shadow: 2px 2px 5px #888, 0px 0px 10px 2px blue;">
Multiple shadows example
</div>Always ensure each length value has a correct unit, colors are valid, and values are in the correct order to pass validation.
Replace the cursor value hand with the standard pointer to indicate a clickable item, as the CSS cursor: hand is not valid in modern web standards.
CSS specifies the cursor property to change the appearance of the mouse pointer over an element, to indicate the interaction type. The value hand was utilized in old versions of Internet Explorer to denote a clickable link or button. However, the CSS specification uses pointer as the standard value to imply that an area is interactive or clickable, such as hyperlinks or buttons.
If you’re using cursor: hand, it will not be recognized by browsers following the current CSS standard, leading to the W3C Validator warning about an invalid value. To resolve this issue, simply replace hand with pointer. This change makes sure that the appearance of the cursor is displayed according to the intended behavior across all modern browsers and platforms.
Example
Invalid CSS:
button {
cursor: hand; /* Invalid value */
}Valid CSS:
button {
cursor: pointer; /* Correct standard value */
}In both code snippets, the CSS is applied to a button element. By using cursor: pointer, the mouse pointer turns into a hand icon, indicating that the button is clickable and adheres to the W3C standards.