Chrome and Firefox failing to render background property in CSS

I encountered an issue with my HTML code that I tested on both Chrome and Firefox. The background color of the first div is not displaying correctly in either browser.

.box-orange {
  // without any position declaration    
  background: orange;
  height: 100px;
  width: 100px;
  border: 1px solid blue;
}

.box-red {
  background: green;
  height: 100px;
  width: 100px;
  border: 1px solid red;
}
<html>

<head>
</head>

<body>
  <div class="box-orange"></div>
  <div class="box-red"></div>
</body>

</html>

Could someone please help me identify the issue?

Answer №1

To fix the error, delete the comment that is causing it. Remember to use the correct format for comments in CSS, like this: /*your comment*/

Answer №2

In CSS, it is not possible to use double forward slashes (//) for commenting.

<html>
<head>
<style>
.box-orange {        /* without any position declaration */
  background: orange;
  height: 100px;
  width: 100px; 
  border: 1px solid blue;
}
.box-red {    
  background: green;
  height: 100px;
  width: 100px; 
  border: 1px solid red;
}
</style>
</head>
<body>  
   <div class="box-orange"></div>         
   <div class="box-red"></div> 
</body>
</html>

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

Using a regular expression to replace occurrences of a string in Objective-C

Can someone help me figure out how to use a regex expression to split my string that contains HTML code? NSString* regex = @"<.*?>"; NSString* html = @"<span class="test">Test1</span><span class="test">Test2</span><span cl ...

Is it possible to change button behavior based on input values when hovering?

Currently, I am attempting to create a webpage where users can input two colors and then when they press the button, a gradient of those two colors will appear on the button itself. <!doctype html> <html> <head> <script src=&apos ...

Strip away the HTML tags and remove any text formatting

How can I effectively remove HTML tags and replace newlines with spaces within text? The current pattern I am using is not ideal as it adds extra space between words. Any suggestions on how to improve this pattern? replace(/(&nbsp;|<([^>]+)> ...

How can you trigger an event when a table cell is selected and a key is pressed?

In my project, I have some td elements with a class name assigned to them. My goal is to trigger a pop-up window when one of these td elements is in focus and the F9 key is pressed. Here's what I've attempted so far: $(document.body).keypress(fu ...

"Exploring the Possibilities of Dynamic Styling with VueJS

I am facing an issue with a data property called editMode set on a Vueity Card. When I click on a button, the editMode switches to true and an icon appears on the v-img. However, I want to adjust the opacity of the image to 0.3 when editMode is true, witho ...

What is preventing the 'p:nth-child(1)' from functioning properly in my HTML code?

Even though I used p:nth-child(1){color: white;} in my CSS style tag, it did not produce the expected result. body { background-color: #162b85; } button, p:nth-child(1) { color: white; } <p class="center">Register your account</p&g ...

Processing an HTML form submission with the help of PHP and AJAX

Having trouble saving basic email data from a website to a MySQL database. I've written the code, but it's not functioning correctly and I can't seem to figure out why. <form class="subfield"> <input type="text" id="em ...

What is the proper way to ensure a flex item takes up 50% of the space when a gap is included in

It appears that I have misunderstood something about flexbox and am struggling to resolve the issue correctly. In my current setup, I have a flexbox container with four columns as its direct children. I want each .flexbox-item to take up 50% of the contai ...

Incorporating Card Layouts with SwiperJS

Reference Code: See Example on Code Sandbox I am looking to implement a swiper that allows for navigating one slide at a time with a layout where slidesPerView: "auto" and fixed width are used. The first two slides behave as expected, but the la ...

Avoiding Ajax overload/server collapse in an Arduino/ESP8266 setting

I've recently been delving into Arduino programming to host an HTML/CSS/JavaScript webpage on an Adafruit HUZZAH ESP8266 breakout board. Please pardon any unconventional methods I may be using. My approach involves utilizing Ajax to update pressure g ...

A div housing a jQuery progress bar within an unordered list (ul)

Having an issue incorporating a jQuery progress bar into a ul li tag. <ul> <li> <a href="test">test</a> <div id="progressbar"></div> </li> </ul> I have set display: block for the anchor tag and ...

Is it acceptable for a video to autoplay even if it is not connected to the DOM?

Consider the following three scenarios: document.adoptNode, document.importNode, and document.createElement with assigned properties. In all cases, the video autoplay feature is activated even when it's not connected to the DOM. This behavior diffe ...

Creating divs that adapt to different screen sizes without relying on flexbox

Currently, I am in the process of developing a chat interface where the viewport height is set to 100vh. The layout consists of a header/navbar, a "main content" section, and a footer housing the input field (you can view the code here) The way I have str ...

How do you go about indenting a paragraph in CSS following the insertion of

My objective: To have all paragraphs indented except for the ones following the .firstCharacter class. In some sections of my page, I utilize a drop cap to start off the first paragraph. I have configured all subsequent paragraph tags to be indented using ...

Fade In Effect in Angular 2 Using SwitchCase

Hi everyone, I'm facing an issue with making my switch cases fade in after one is called. Here's what I have so far. When the correct switch case is entered in the input field, I want the current one to fade out and the new one to fade in. How ...

The sticky navigation and scroll to top features both function perfectly on their own, but when used simultaneously, they do not work

I'm facing an issue with two scripts on my website - when they are separate, they work perfectly fine but together, they don't seem to function properly. What could I be missing here? Script 1: window.onscroll = function() {myFunction()}; var n ...

Ways to align the content in the middle of a div with CSS

My website is functioning perfectly on large devices, but I am facing an issue when trying to center the icon below the slider on mobile devices. I have used the following code in the icn class: .icn{ margin:0 auto; } However, the icon is not centered as ...

The menu bar becomes distorted when the page is zoomed out

Hey everyone, I could really use some assistance with my menus. Whenever I zoom out of the page, they become distorted. Here is the link to my website: https://dl.dropbox.com/u/22813136/Finding%20Nemo%20Inc/FNemo_front.htm# I tested the link on Internet E ...

Resounding achievement following the completion of the upload

I'm looking to display the message "success" on the same page as my form if it uploads correctly. I am new to PHP and not sure how to achieve this. Can anyone help? index.php <form action="upload" method="POST"> <input name="field1 ...

What's the best way to customize the color of the text "labels" in the Form components of a basic React JS module?

I have a React component named "Login.js" that utilizes forms and renders the following:- return ( <div className="form-container"> <Form onSubmit={onSubmit} noValidate className={loading ? 'loading' : ''}&g ...