The color scheme on my website's menus is stuck and won't update

Whenever I attempt to modify the color of my Categories and Departments menu, the selected color does not stick and it remains unchanged:

.DepartmentsList {
    border: #006600 1px solid;
    text-align: center;
    margin-top: 20px;
    background-color: #006600;
}
.DepartmentsListHead {
border: 1px solid #006600;
background-color: #006600;
background-repeat: repeat;

<%@ Register src="UserControls/DepartmentsList.ascx" tagname="DepartmentsList" tagprefix="uc1" %>

<%@ Register src="UserControls/SearchBox.ascx" tagname="SearchBox" tagprefix="uc3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title>Farm Shop: Online Store</title>
  <asp:ContentPlaceHolder id="head" runat="server">
  </asp:ContentPlaceHolder>
</head>
<body>
  <form id="form1" runat="server">
    <div class="Window">
      <div class="Main">
        <div class="Left">
          <div class="Container">
            &nbsp;<uc3:SearchBox ID="SearchBox1" runat="server" />
              <uc1:DepartmentsList ID="DepartmentsList1" runat="server" />
              <uc2:CategoriesList ID="CategoriesList1" runat="server" />
htmlcssvisual-studio-2012

Answer №1

While I am not familiar with .NET, it seems that there is a discrepancy in your code where classes are called in the style sheet but 'id' is used within the code.

You may want to consider adding the class to the tag or updating the class name in the style sheet to match the id.

For instance:

From

.DepartmentsList {
    border: #006600 1px solid;
    text-align: center;
    margin-top: 20px;
    background-color: #006600;
}

To:

#DepartmentsList {
    border: #006600 1px solid;
    text-align: center;
    margin-top: 20px;
    background-color: #006600;
}

Or:

<uc1:DepartmentsList ID="DepartmentsList1" runat="server" class="DepartmentsList" />

I hope this explanation is clear and provides some assistance.

Best regards

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

What is the method for adding/removing the 'hidden' attribute within a <p hidden> element

What is the best way to toggle the visibility of 'hidden' in the element <p hidden>My Text</p>? I attempted removing the attribute and setting it to false, but unfortunately, neither method seemed to work. let paragraphElements = d ...

javascripthtmlattributeshidden

What is the best way to incorporate web components into a React Js project?

I am currently unfamiliar with web components. My main goal is to integrate Google Material Components into my React.js project. Google Material Web Component can be found here: https://github.com/material-components/material-components-web Is there a ...

htmlreactjscssmaterial-ui

Changing the Position of HTML Scripts in React

I am facing an issue where I need to relocate an external script within a specific section of my page. However, I am unable to access the CSS attributes associated with this item. It seems that it is displayed as an iFrame, making it difficult to modify th ...

javascripthtmlcssreactjs

How to Enhance HTML Requests with a Variety of Search Terms

I recently came across a helpful post on how to use R to search for news articles on Google. The post provides a link to Scraping Google News with Rvest for Keywords. The example in the post demonstrates searching for a single term, such as: keyword <- ...

htmlrweb-scraping

What is the best way to pass a variable using the href tag in jQuery?

for (var i in result) { $('#tgt').append( "<li><a href='/UpdateStatusData/?id='"+result[i]+" >"+result[i]+"</a></li>"); } I am facing an issue where the id is appearing blank when being extracted o ...

javascriptjqueryhtmlajax

Custom AngularJS directive for ensuring the selection of a required HTML element

Today brings another question as I continue working on my web application. I've encountered an issue with the 'required' attribute not being widely supported in major browsers. The attribute only works if the first option value is empty, whi ...

javascriptjqueryhtmlangularjs

Incorrect icon being displayed for PHP validation

Seeking guidance in PHP as a newcomer. Attempting to display an error icon upon validation failure. PHP <?php // Initialize variables and set them as empty values $nameErr = ""; $name = ""; if ($_SERVER["REQUEST_METHOD"] = ...

phphtmljquery

Gleaming personalized select input/selectize input

I am striving to customize my Shiny select input in the following ways: Eliminate the label Set a unique background color: #2f2d57 Include a placeholder Enable users to both type-in and select Despite my efforts, I have not been successful in alignin ...

javascripthtmlcssrshiny

Executing HTML and JavaScript code stored as a string

I want to display a string that includes HTML and JavaScript. It is important that the JavaScript is interpreted similarly to jQuery's $.load(), but without using jQuery. Here is an example of what I am attempting to achieve: https://jsfiddle.net/4tf ...

javascripthtmltemplates

Disable onclick action for programmatically created buttons

I'm facing an issue with the code I'm using to delete messages on my website. The problem is that while newly added messages are being dynamically loaded, the delete button (which links to a message deletion function) does not seem to be working. ...

javascriptjqueryhtmlajax

Is there a possibility of encountering problems when collapsing table rows versus individual cells?

By using the css visibility property, you have the ability to set it to collapse for specific table rows. Nevertheless, there are two methods to accomplish this task. The first is to implement the logic on the <tr> element: thead > tr { visi ...

htmlcsshtml-table

New HTML5 feature enables users to upload images onto canvas, enabling them to drag, rotate, and even

I'm a beginner in Html5 and I'm having trouble with uploading an image to the canvas. When I provide the direct source of the image, it works fine. I referred to this link for help javascript: upload image file and draw it into a canvas. Let me s ...

jqueryhtmlimagecanvas

Flexbox - Designing with Images and Text

I have a flex container with two elements: an image and a small piece of descriptive text. I want the image to be responsive but not grow beyond a certain height, which is causing a gap when the screen width expands beyond the max height of the image. Is ...

cssflexbox

Display a concealed text box upon clicking BOTH radio buttons as well as a button

Below is the HTML code for two radio buttons and a button: <body> <input data-image="small" type="radio" id="small" name="size" value="20" class="radios1"> <label for=&qu ...

javascripthtmljqueryradio-button

Step-by-step guide on accessing values from a JavaScript object

I have a dictionary variable declared within a script tag on an HTML page. My goal is to retrieve the values associated with the "Roads" and "Intersections" keys, which change each time the page is refreshed. By capturing these values, I can then use JavaS ...

javascripthtmljsondom-eventsjavascript-objects

CSS grid challenges on a massive scale

My CSS grid timeline is currently generating around 1300 divs, causing performance issues. Is there a way to style or interact with the empty nodes without rendering all of them? I also want each cell to be clickable and change color on hover. Any suggest ...

javascriptcsscss-grid

Attempting to create a dynamic grid layout utilizing CSS to ensure optimal responsiveness

I am working on creating a webpage layout similar to the one in the link below: The maximum width for the layout is set to 1600px. However, I am facing challenges in making it fully responsive. This is because all the boxes are given widths in percentages ...

htmlcss

Update background to full screen and include text when hovering over DIV

Currently, I am utilizing Bootstrap and have a layout with 6 columns containing icons/text within. I desire to implement a hover effect where each column triggers a background change in transition for the entire section. In addition, text and button elemen ...

javascriptjquerycsstwitter-bootstrap

Arrange two elements next to each other within a container div

I thought this task would be a piece of cake, but after staring at it for the past half hour, I'm still stumped. Check out the HTML code below: <div style="width: 250px;"> <img style="float: left; width: 20px;" src="public/_images/ok_kutu ...

htmlcssweb

How do I view a wildcard in my ID selector using jQuery?

When I want to initially hide various content scattered around the page, I usually use the following jQuery code: $('#objective_details, #time_estimate_details, #team_members_details, #resources_details').hide(); Is there a method to utilize a ...

javascriptjqueryhtml