What causes the background-color:attribute to malfunction when there are comments in the preceding line?

Recently, while testing internal stylesheets in the latest version of Chrome, I encountered a peculiar bug that caused my code to break.

Strangely enough, any comments placed before background-color:rgb(51,51,51) seemed to trigger the failure of the code.

Below is an example of the code where the background color doesn't change:

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8>
    <style> 
        body {
            width:100%; <!--browser screen must be fixed width-->
            height:100%; <!--and height-->
            margin:0px; <!--removes uneven margin added to row's margins-->
            background-color:rgb(51,51,51); <!--note that height and width must be specified to work-->
        }
    </style>
</head>

<body>
    <h1>
        Headline
    </h1>
</body>
</html>

And here is another example where the background works correctly:

<html lang="en">
<head>
    <meta charset="utf-8">
    <style> 
        body {
            background-color:rgb(51,51,51); <!--note that height and width must be specified to work-->
            width:100%; <!--browser screen must be fixed width-->
            height:100%; <!--and height-->
            margin:0px; <!--removes uneven margin added to row's margins-->
        }
    </style>
</head>

<body>
    <h1>
        Headline
    </h1>
</body>
</html>

It is important to note that the comments might not align with the code (I removed extra code but left the comments). This situation has left me puzzled - what exactly could be causing this issue? Where did I go wrong?

Answer №1

The CSS2 specification states that comments in CSS should begin with "/*" and end with "*/".

This means using /* */ for comments in your CSS code.

Although HTML style comments like <!-- --> are also acceptable, they should only wrap entire CSS rules blocks:

<style>
    <!--
    body {
        background-color:rgb(51, 51, 51);
        width:100%;
        height:100%;
        margin:0px;
        color: red;
    }
    -->
</style>

The use of <!-- --> delimiters is a way to hide CSS blocks from browsers that do not support HTML 3.2 (similar to how Javascript code can be wrapped in <!-- -->). However, these browsers are very outdated.

Answer №2

Your comment syntax is incorrect, please use block comments instead

/* this is my comment */ 

Answer №3

When working with CSS, it's important to remember that commenting is different from HTML. Instead of using the HTML comment syntax, you should use the following method for commenting in CSS:

 /* background: grey ;  */

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

Remove the color gradient for the column headers in the Google Visualization table

Whenever I attempt to change the colors of the column headers using the method demonstrated in this insightful source, a rather generic gradient is applied. Interestingly, the example code provided also demonstrates the same default gradient on the secon ...

What is the best way to implement a dialog box that displays a website within it, all while keeping my SharePoint site running in the background?

For a while now, I've been working on SharePoint Online and trying to troubleshoot an issue without success. That's why I'm considering starting over with a specific section of my SP site from scratch. My current project involves creating a ...

Building a custom server rack table using PHP and MySQL is a great way to optimize your

I am in the process of developing a rack server using PHP and MySQL. My first task is to set up a dynamic table with rowspan functionality, followed by implementing drag-and-drop features using Ajax. Although I have researched various resources and attemp ...

Guide on how to log out in asp.net using an HTML button

I have designed a master page that features a "sign out" button. Can someone guide me on how to implement this button for logging out of the current session? Below is the code for the sign out button: <a href="#" class="btn btn-default btn-flat">Si ...

What is the best way to locate {Tags} only within the visible HTML content, excluding the elements' attributes?

Is it feasible to extract a specific pattern using only regexp (and possibly php) that falls outside of one pattern but within another in php (or maybe with ?R in php regexp for the recursive aspect)? The objective is to locate the tags between > {This ...

CSS: The search field's results are displayed in a width that is half of

There seems to be an issue with the search dropdown results on my website. When you click on the magnifying glass in the top menu and try to search, the results only appear as half the width of the search form. I would like to know how I can display it i ...

Tips for accessing the names of subdirectories and files on a website

If we have the URL, is it possible to access the names of the files within the parent directory? Similar to how we can do in DOS by using the command "DIR" to view the list of files inside a folder. For example, if we have a URL like , I am curious to kno ...

Display a single component from a panel with Angularjs

As a newcomer to Angularjs, I am currently exploring the functionality of its different modules. For my project, I am aiming to create an accordion-style layout for a page where clicking on a panel button reveals a table. The dynamic HTML code generated ...

Is there a term similar to "Rise above the Rest" in the world of Web Development?

Hey, I've encountered a new issue right now. Currently, I have two elements that are fixed to the top and bottom of the page. However, the elements in between them are overlapping the top element. Even though I tried keeping both elements fixed, th ...

The carousel is having trouble aligning the images div to the center

Struggling to create a carousel slide that automatically resizes image, but can't seem to get the inner div containing the images to center within the outer div. Even after trying various CSS properties like text-align:center and margin-left: auto, th ...

Problem with CSS creating the Typewriter effect when the third line of text is added

I've been working on a website for my new company and I want to incorporate a typewriter effect on the main page. I came across a tutorial on Medium.com but I'm having trouble adding an additional span to the provided code. Take a look at the lin ...

"Crafting dynamic buttons with ASP.NET and CSS that adapt to various

Looking for advice on making a popup responsive. Currently experiencing an issue where the buttons go off-screen when adjusting window size, even after using percentages in CSS instead of pixels. Any suggestions? CSS: .modal { display: none; posi ...

Enhance the aesthetics of material-ui tooltips by utilizing @emotion/styled

Can material-ui tooltips be customized using the styled function from @emotion/styled? import { Tooltip } from '@material-ui/core'; import styled from '@emotion/styled'; const MyTooltip = styled(Tooltip)` // customize the tooltip ...

Having trouble displaying the cover image properly on mobile devices using Bootstrap/MDBootstrap, facing issues with the live server as well

My project includes a cover image in .jpg format that displays perfectly on desktop, but is invisible on mobile devices. When viewed through Live Server on Vscode, the image appears at all sizes including mobile, but when hosted on Netlify and accessed fro ...

The design does not have the capability to scroll

I am currently working on developing an application using Vaadin and Spring Boot. I have successfully set the background of my app by utilizing the following CSS code within the styles.scss file (inside myTheme as specified by Vaadin): .backgroundImage{ ...

What is the best way to incorporate a logo into the top left corner of the Navigation Bar?

Currently, the Studio Ghibli Logo image is embedded in the HTML code at line 17. I am looking to place it in the top left corner of the navbar. How can I achieve this? Here is a reference image: ref image If there is a more efficient way to code the navba ...

The HTML elements may have identical heights, but visually, one appears larger than the other

The size of the "login to enter chat" button seems to be larger than the messageBox div, despite adjusting padding and margins. What could be causing this issue? Any suggestions on how to fix this design glitch? #chatbox { width: 500px; height: ...

displaying data in a table - adjust cell contents for smaller screens

I am currently designing an admin page using Bootstrap 5. I have implemented a data table with the following contents: On larger screen sizes: https://i.sstatic.net/2a9C1.png For smaller screen sizes (mobile phones), I have collapsed the action button as ...

Tips for creating a button that maintains consistency across different screen sizes

One of the images linked below shows a button displayed on two different sized screens, one 24 inches and the other 13 inches. The button on the 24-inch display appears normal, while the "Add to Cart" button on the 13-inch display is broken. Check out th ...

Issues with the local or browser display of @font-face

I'm really struggling to get my @font-face to display correctly, whether I view it locally or in the browser preview. This is the CSS code I am using: @font-face { font-family: chopin-script.regular; src: local('chopin-script.regular'), ...