Error encountered during W3 CSS validation: Parsing error

Upon attempting to validate the code snippet below:

   .cd-stretchy-nav ul a { (line 186)
    position: relative;
    display: block;
    height: 50px;
    line-height: 50px;
    padding: 0 calc(1em + 60px) 0 1em;
    color: white;
    opacity: 1;
    font-size: 1rem;
    -webkit-transition: color 0.2s;
    -moz-transition: color 0.2s;
    transition: color 0.2s;
}

    .cd-stretchy-nav ul a::after { (line 200)
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    right: 22px;
    top: 50%;
    -webkit-transform: translateY(-50%) scale(0);
    -moz-transform: translateY(-50%) scale(0);
    -ms-transform: translateY(-50%) scale(0);
    -o-transform: translateY(-50%) scale(0);
    transform: translateY(-50%) scale(0);
}

The validation process generated the following errors.

191 .cd-stretchy-nav ul a Parse Error calc(1em + 60px) 0 1em;

200 Parse Error [: white; opacity: 1; font-size: 1rem; -webkit-transition: color 0.2s; -moz-transition: color 0.2s; transition: color 0.2s; } .cd-stretchy-nav ul a::after]

Can anyone identify what might be causing these errors? The code functions correctly on the website.

Answer №1

There seems to be an issue with the CSS3 validation tool provided by W3C. For more details, you can visit https://www.w3.org/Bugs/Public/show_bug.cgi?id=18913.

Upon closer inspection, it appears that your CSS calc value is correct and the second error could be due to a misleading response from the validation service.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

styled components are having issues with background gradients and opacity not functioning properly

Hello, I am currently working with styled components and have the following global style code: const GlobalStyle = createGlobalStyle` html{ font-family: roboto; background: linear-gradient(45deg,rgba(137,255,255,0.5),rgba(161,252,143, 0 ...

The SVG animation is reversing and decreasing in size from the bottom

Feeling lost, I spent a day searching without success. I have a project in full Vuejs and I thought using Svg would be easy and fun, but I can't figure out why the image resizes when playing an animation. The bottom of the svg seems to resize and get ...

Looking to limit the size of the content to fit within the parent column's dimensions [using Twitter Bootstrap]?

One of the main challenges I'm facing is that the contents inside the bootstrap columns are not scaling properly to fit the size of their respective columns. Here's the layout I'm aiming for: 1 This page consists of two separate columns: ...

What is the best way to show and hide the information in a FAQ section when each one is clicked?

const faqItems = document.getElementsByClassName("faq-question"); const faqContents = document.getElementsByClassName("faq-content"); for (item of faqItems) { console.log(item); item.addEventListene ...

What is the best way to make the child Div float to the bottom of the parent Div?

Screenshot I attempted various CSS techniques in an effort to make the .booknetic_appointment_container_footer float to the bottom of #booknetic_theme_5, but unfortunately, I was unsuccessful. The closest solution I found involved hardcoding padding, but ...

"Creating dynamic radio buttons within a dynamic table using Ajax and jQuery: a step-by-step guide for toggling

Looking to generate a dynamic html table with data retrieved from a web method in asp.net using Ajax jQuery. One of the fields is a boolean value that needs to be associated with radio buttons. However, encountering an issue where setting attributes like ...

Import information from a MySQL table into a single input field

I am currently working on a project that involves retrieving data from a MySQL database and displaying it in a single field. Below is the MySQL code I am using: My goal is to load all the data from $row['db_numbers']; into the field. <input t ...

Click on the text next to my checkbox to activate it

I've been attempting to create a situation where the text next to my checkbox is clickable. However, for some reason, the code I'm using doesn't seem to be working as expected. Can anyone help me troubleshoot this issue? <form name="f1"& ...

The touch event doesn't seem to be functioning properly on the div element, but it works perfectly on the window element

I have a dilemma that's been puzzling me lately. I'm trying to append a touchevent to a div, but my current method doesn't seem to be working. Here's what I've tried: $("#superContainer").bind('touchstart', function(even ...

The impact of breakpoints in Bootstrap

As a newcomer to Bootstrap, I have a question about the code snippet below: <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row bor ...

Using regular expressions to extract URLs from code in Python

My research involves a dataset of newspaper article links, but I've run into an issue. The links in the dataset all end with .ece extension, which is causing problems due to some API restrictions. http://www.telegraaf.nl/telesport/voetbal/buitenlands ...

Is there a simpler method for verifying if the password and repeated password align on a form?

The form on my page includes two text fields for the user to input their new password and then repeat it for verification. I've experimented with various methods involving *ngIf, but I'm starting to get confused about how it all fits together. I ...

The CSS Inline-Grid counterpart in Bootstrap 4

I am looking to showcase a list of items on a desktop web page in a dynamic grid format. <div class="departments"> @foreach (var department in Model) { <div> <img src="department_photo.png" /> <div class="details"> ...

The onClick event for "history.go(0)" is functional in Internet Explorer, but it does not work in Mozilla Firefox. What can be done to address this problem specifically for Mozilla browser?

After experimenting with different browser compatibility, I have discovered a way to clear all fields when clicking the "New" button. By using the code onClick="history.go(0)", the fields are successfully emptied in IE but unfortunately fail in Mozilla. ...

Issue encountered while attempting to run app.css file downloaded from Nativescript Playground

Encountering an error with my code... ERROR in ./app.css Module not found: Error: Can't resolve './nativescript-theme-core/css/core.light.css' in 'C:\Users\elish_n8zkzh8\Downloads\bandz test\app' @ ./app. ...

What is the best way to automatically hide the Materialize CSS mobile navbar?

Recently, I completed a website called Link. Using only Materialize CSS, Vanilla JS, and plain CSS, I developed a single-page application that effectively hides and reveals different sections based on event listeners. Everything functions smoothly except ...

Can a FontAwesome icon be used as a button in Bootstrap?

Hi there, I'm trying to use a fontawesome icon as a button in my code. Here is what I have so far: <!DOCTYPE html> <html lang="en"> <head> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" ...

firefox compatibility issues with jquery ajax

Trying to establish a connection with a URL and expecting a large object in response has proven to be challenging. The process appears to function smoothly until an error occurs during the return reply, triggering the .ajax.error() function. Unfortunately, ...

Incorporate PHP functionality into an HTML document

I'm looking to incorporate a PHP code into my phoneGap application (HTML). I've attempted the following code, but unfortunately it's not functioning as expected. <html> <head> <title>PHP Integrated with HTML&l ...

The footer is not extending all the way to the bottom when using a flex layout

While working on my website, I attempted to create a sticky footer. To achieve this, I used JavaScript to dynamically generate the <footer> element in order to keep it at the bottom of the page at different screen widths. My goal was to append the f ...