CSS failing to display properly

My CSS Stylesheet: 

body {
margin: 0px;
padding: 0px;
background-color: #4d4d4d; }

#reflection {
background-color: #fff;
background-repeat: no-repeat;
width: 100%;
height: 257px;
}

#main {
border-top: 20px solid #494949;
margin-left: 0px;
margin-right: 0px;
margin-top: 90px;
height: 330px;
background-color: #eee;
}

Check out my index page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>P.S.</title>
</head>
<body>
 <div id="main">
THIS IS THE MAIN PART!</div>
<div id="reflection">And this is the reflection.</div>
</body>

I can't figure out why the "reflection" div's CSS styling isn't displaying properly on my webpage after hours of troubleshooting.

csshtml

Answer №1

body {
margin: 0px;
padding: 0px;
background-color: #4d4d4d; }
 }

The CSS above has been duplicated twice. Kindly remove one instance and ensure that the <html> tag is included as well.

Answer №2

Obtained from 

.reflection {
background-color: #fff;
background-repeat: no-repeat;
width: 100%;
height: 257px;
 }

Additionally, in response to your inquiry 

#reflection {
background-color: #fff;
background-repeat: no-repeat;
width: 100%;
height: 257px;
background-image: url('http://www.ps.niu-niu.org/shine.png');
 }

Please ensure the server is updated with the same code as indicated in your query.

Answer №3

There seems to be an error in the css file where there is an additional } at the end of the body.

body {
margin: 0px;
padding: 0px;
background-color: #4d4d4d; } /* extra bracket found HERE */
}

Answer №5

Your observation is being identified as an id instead of a class in the css.

UPDATE: I am observing this in the live view, ensure that you have saved and implemented the modifications on your server.

Answer №6

One crucial element that you have overlooked in your markup is the <html> tag.

Answer №7

Ensure that you have included the necessary 

<link rel="stylesheet" type="text/css" href="path/to/your/stylesheet.css>
within the <head> section of your webpage.

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

Is there a reason the hr tag elements aren't extending to the full width within the list?

I am having trouble with my hr tag elements in the table I created - they are not spanning the full width like the line above them. I have tried adjusting the width property but it doesn't seem to be working. Can anyone offer advice or guidance on how ...

htmlcssbootstrap-5

Issue with :visited pseudo-class not functioning as intended

My code includes all four basic pseudo-classes, and they all seem to be working fine except for the :visited pseudo-class. The color property doesn't function properly, and the background property appears to be inactive. I'm not sure what the iss ...

htmlcss

Update the value of the following element

In the table, each row has three text fields. <tr> <td><input type="text" data-type="number" name="qty[]" /></td> <td><input type="text" data-type="number" name="ucost[]" /></td> <td><input ty ...

javascriptjqueryhtml

What is the best way to trigger a refresh of a cached CSS file on a JSP website, without using PHP?

I am currently making significant changes to my site by modifying a CSS file. Is there a way to compel clients to refresh the CSS in order to see the new updates? Unfortunately, it is not feasible to ask thousands of people to manually reload the page us ...

javascripthtmlcssjspcaching

Adjust the white background to match the gray background seamlessly

I'm in the process of developing a forum and encountering some challenges with CSS. My goal is to extend the white area all the way to the right edge of the gray background, leaving a gap of around 5px/10px. I've experimented with different CSS ...

htmlcss

Adjust the CSS2D objects' visibility based on their parent THREE.js Group's visibility toggling

In my project using THREE.js, I have successfully added meshes and CSS2DObjects (labels) to a group. When I toggle the visibility of the group, the meshes change visibility as expected. However, the CSS2DObjects' visibility does not change accordingly ...

javascripthtmlcssthree.js

There are three dropdown menus in my form, and the options available in each one are based on the choices made in the

I need to create a form with three dropdown menus. Each menu should display options based on the selection made in the previous one. For example, there should be dropdowns for categories, car brands, and car models. The car brand dropdown should only sh ...

phpjqueryajaxhtml

jQuery not refreshing properly

I'm currently in the process of creating a script to switch the language on a website using PHP and Ajax/jQuery. I would like the page content to refresh without having to reload the entire page. So far, this is what I have come up with: $( "a[data-r ...

javascriptphpjqueryhtmlajax

The use of the Image (img) tag results in a 404 error and the display of

Image displayed <img src="https://img.youtube.com/vi/Q9p-UGqlRMg/mqdefault.jpg"> I attempted this (It works with other 404 image URLs, but not with youtube thumbnail URL) $('img').on('error', function() { $(this).at ...

javascripthtmljqueryajax

The Quirks of jQuery's .load() Method

On my website, I am incorporating a basic jQuery script to load content from one part of a webpage into the 'display container' on the same page. The content being loaded consists of multiple divs enclosed within an outer <div> that is hid ...

javascriptjqueryhtmlcssajax

Troubleshooting Bootstrap Column Display Issues on Mobile Devices

I used bootstrap columns to organize my users' information. While they look good on larger screens like laptops and desktops, on smaller phone screens the second column appears to have some excess margin at the top. How can I fix this issue? <div ...

htmlcssbootstrap-4

Executing a function within ng-repeat

How can I trigger a function whenever the value of an <input type="file"> element changes within an ng-repeat loop? I have attempted using $(#"id").change() but it does not seem to be working. I also tried using ng-change, but it does not work with ...

javascriptjqueryhtmlangularjs

Generate the stored image data onto an HTML 5 canvas

I have been diving into the world of HTML5, exploring how to create and draw shapes in canvas and save them in a MySQL database for later restoration within the canvas itself. During my research, I came across this helpful tutorial. After successfully sa ...

htmlhtml5-canvashtml5-appcache

Creating personalized styles for my React components with the help of styled-components

Exploring the power of styled-components for custom styling on child components has been an interesting journey for me. For instance, I recently crafted a unique card component named myCard. Take a look at how it's structured: import React from "rea ...

cssreactjsmaterial-uistyled-components

Having difficulty retrieving the click event using a jQuery selector

I'm facing issues with my jQuery selector when trying to access a click event. Below is the HTML code snippet: <li class="handle-bars"> <span class="fa fa-bars pull-right text-primary m-t-10"></span> <span class="fa fa-co ...

javascriptjqueryhtmljquery-selectors

Display the results of a PHP-MySQL query within an HTML dropdown list

In my database, I have two tables called groups(groupID, groupName) and userBelongToGroups(userID, groupID). groups userBelongToGroups =================== ===================== groupID | groupName userID | groupID --- ...

phphtmlmysqlmysqli

Optimizing WebGrid Alignment in MVC3 Using RAZOR

I need to customize the width and alignment of each column in a WEBGRID within MVC 3. Specifically, I have 5 columns and I want to set different width and alignment for each header. Here is my code snippet: @{WebGrid grid = new WebGrid(); if (@Model.V ...

cssasp.net-mvc-3webgridrazor-grid

Leveraging the power of JavaScript and possibly regular expressions to extract numerical values from a

I am attempting to extract a variable number from the text provided in the following example: Buy 5 for € 16.00 each and save 11% Buy 50 for € 15.00 each and save 17% Buy 120 for € 13.00 each and save 28% Buy 1000 for € 10.00 each and save 45% Th ...

javascriptjqueryhtmlregex

Center align your animations without using the text-align property

I'm in the process of refining this custom animation to make it smoother. Check out the live animation here. The issue I'm encountering is that during the transition when the city name rotates up and replaces the old one, the text-align center ...

javascriptjqueryhtmlcss

Bootstrap navbar partially collapsed with inner items concealed not at the edges

Many discussions have come up regarding partially collapsing Bootstrap navbars, such as: Item1 Item2 Item3 Item4 Item5 Is it possible to achieve the following collapsed format: Item1 Item2 Item3 =menu= Or: =menu= Item3 Item4 Item5 This method ...

htmlcsstwitter-bootstrapbootstrap-5