How come my div isn't updating its color in Internet Explorer?

Having trouble with the following scenario in IE.

Styles: 

.tabmenu {
    background-color: #990000;
    display: inline-block;
    width: 150px;
    position: relative;
    left: 59%;
    border-top-left-radius: 10em;
    margin-bottom: -8px;
    min-width: 75px;
    max-width: 150px;           
    font-size: 13px;
    font-weight: bold;
    font-style: normal;
    font-family: Arial;
    border: none;
    padding: 5px 5px;
    height: auto !important;
    cursor: pointer !important;
    color: #ffffff !important;
    text-align: center;
}

In .cshtml file

<div class="tabmenu" style="width:100px;" onclick="btnCommonOnClick()" id="btnCommon">Common</div>
<div class="tabmenu" style="background-color:#999999!important;"  onclick="EquipmentSpecificOnClick(1)" id="btnEquipment">Specific</div>   
<div class="tabmenu" style="background-color:#999999!important;width:100px;" onclick=" btnUnassignedonClick(this)" id="btnUnassigned">Unassigned</div>
<div class="tabmenu" style="background-color:#999999!important;width:100px;" onclick="OrphanOnClick()" id="btnOrphan">Orphan</div>

The initial background colors display correctly. However, upon clicking a different div, the background color fails to change as expected. The code snippet used for this purpose is:

$("#btnCommon").css("background-color","#999999 !important");//grey
$("#btnEquipment").css("background-color","#999999 !important");//grey
$('#btnOrphan').css("backgroundColor","#999999!important");//grey
$('#btnUnassigned').css("backgroundColor","#990000!important");//red

This code does not work properly in IE — the targeted div remains grey instead of changing to red as intended.

Seeking any solutions?

javascriptjquerycsshtmlinternet-explorer

Answer №1

Verified in IE Edge that using inline 

background-color:#999999!important
prevents CSS override.

If you remove the !important statements, it will function correctly.

I inserted this into an HTML page:

<div class="tabmenu" style="background-color:#999999!important;width:100px;" onclick="OrphanOnClick()" id="btnOrphan">Orphan</div>

and then executed this in the developer console:

$('#btnOrphan').css("backgroundColor","#990000!important");

However, the background color remained unchanged.

By modifying the HTML to:

<div class="tabmenu" style="background-color:#999999;width:100px;" onclick="OrphanOnClick()" id="btnOrphan">Orphan</div>

and running:

$('#btnOrphan').css("backgroundColor","#990000");

the background color was successfully altered.

If keeping the !important, consider defining two CSS classes:

.bg-gray {background-color:#999999 !important;}
.bg-red{background-color:#990000 !important;}

and apply them in your HTML like this:

<div class="tabmenu bg-gray" style="width:100px;" onclick="OrphanOnClick()" id="btnOrphan">

To switch colors within your click handlers:

$('#btnOrphan').removeClass("bg-gray").addClass("bg-red");

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 AngularJS UI Bootstrap tooltips in conjunction with Bootstrap 4: A complete guide

When using the directive <div uib-tooltip="hello-world" tooltip-is-open="true">hello world</div>, an error occurs: Failed to load template: uib/template/tooltip/tooltip-popup.html This website is utilizing both ui-bootstrap.js and ui-bootstra ...

javascriptangularjstwitter-bootstrap

The controller and node js request associated are invisible to my HTML page

Here is my HTML code. I have just created a unique controller for a specific part of the code. <div class="mdl-grid" ng-controller="ValueController"> <div class="mdl-card mdl-shadow--4dp mdl-cell--12-col"> <div class ...

javascripthtmlangularjsnode.js

Stop Google from indexing content that is loaded through ajax requests

Our website utilizes Ajax calls to load duplicate content. This method helps enhance user experience by avoiding the need to reload the entire page when users click on the menu. Although this technique works efficiently, the Ajax-loaded content is essenti ...

htmlajaxindexing

The <Span> element appears as bold in Internet Explorer when placed inside a table, whereas it appears as regular text in Google

I've successfully coded 5 dabbles, utilizing divs for precise positioning. Upon inspection in Chrome and IE, I noticed that the text appears bold in IE, unlike Chrome where it looks normal. To address this difference, I incorporated the <span> a ...

htmlgoogle-chromeinternet-explorerhtml-table

Mastering the Art of Aligning Avatars: Effortless Right Alignment

Here's the updated version of the navigation bar: <nav class="navbar navbar-expand-md navbar-dark bg-dark static-top"> <button class="navbar-toggler" type="button" data-toggle="collapse"> ...

htmlcssavatar

Make changes to a characteristic of the pseudo-class ":host"

Within an Angular project, I am attempting to modify the border-top attribute of the pseudo-class :host associated with the component called p-table-row. This specific component is part of a library created by Porsche and can't be directly edited. Vie ...

cssangularcss-selectorsshadow-dom

The content within the div appears to be in a perpetual state

I'm working on creating a chat application with a single interface. I've encountered an issue where the content in the middle div "messages" keeps bouncing, including the scroll bar. How can I resolve this problem? Additionally, I'm unable ...

javascripthtmlcss

Ensure that the CSS fade-in effect occurs every time the element is clicked, not just the first time

Is it possible to make text fade in on every click instead of just the first time by using CSS transitions and JavaScript? My current progress: <style> #data { transition: .7s; } </style> <h1 id="data"></h1> <a hr ...

javascripthtml

Res.redirect does not seem to be functioning properly while working with React

In my project, I am using React for the frontend and have created an API using Express. I have implemented code to store a JWT token in the cookies during the initial login. However, when attempting to log in again, the code is supposed to check if a token ...

javascriptnode.jsreactjsexpress

jQuery file uploader only transmitting a single chunk

Currently, I am integrating the jQuery file uploader into my Django application. I am encountering an issue where Django is only receiving one chunk of my large file. Initially, I suspected a problem with my UploadFileHandler; however, upon logging the ch ...

javascriptjquerydjangofile-uploadjquery-file-upload

Retrieving DOM elements once the div has been updated from the loaded PHP file

My HTML file has a div that receives updates from a PHP file. The PHP file inserts the title and author of a single book into the div successfully. I am attempting to use getElementById to retrieve the title of the book using 'btitle' and the au ...

javascriptjquerygetelementbyid

The AJAX load event listener triggers prior to receiving a response from the server

When working on a script to upload images via AJAX, the process is as follows: a user selects an image using a form file input field. The form contains an onsubmit function that prevents the page from reloading after submission. Within this function, data ...

javascriptphpajaxxmlhttprequestsubmit

jQuery ceases to function once AJAX content is loaded

Exploring Options for Flexible Data Display I'm currently in the process of building a webpage that allows users to choose between different layouts for loading data. This includes the option to display data in either a list format or a card interfac ...

javascriptphpjqueryajaxreload

What could be causing my Vue component to not refresh?

Can anyone help me figure out why this component isn't re-rendering after changing the value? I'm attempting to create a dynamic filter similar to Amazon using only checkboxes. Here are the 4 components I have: App.vue, test-filter.vue, filtersIn ...

javascriptvue.jsvuejs2vue-component

"Store JSON data into a variable by formatting it through an AJAX POST request

If I want to make a controller call like this: name.php?data={"user":"test","pass":"test"} To retrieve the necessary information using .ajax, I need assistance in configuring the variable to be sent in that specific format. I previously used the follow ...

javascriptajaxjson

JS is programmed to automatically redirect the user after they have clicked on a div element and a

I'm having trouble with this code that is supposed to redirect a user after they click on the div and then the next button. It's not working for me :( Here is the code I am using: $("a.xxx").click(function() { $(this).toggleClass("yyy"). ...

javascriptjquery

JQuery validation inspecting which submission button is activated

How can I implement validation and determine which button the user has clicked? I have a submit button with the following HTML: <form id="form-post"> <button type="submit" id="one"> ONE </button> <button type="submit" id="two ...

jqueryajax

centered table within a container with vertical alignment

I'm having trouble centering a table vertically in a div. I've tried using vertical-align but it's not working for me. Can anyone suggest a solution to place it at the top of the div? <div class="col-12 d-flex"> <div c ...

htmlcssbootstrap-5

Exploring alternative methods for accessing object values in TypeScript using a string object path without relying on the eval function

If we have an object in JS/typescript structured like this: var obj = { a: { b:{ c:1 } } } And a string "b.c" is given, how can we evaluate this using only the variables provided and retrieve the value 1 from the object without rel ...

javascripttypescript

Cease execution of the jQuery function after a specific duration of time

Is there a way to modify this script on my website that displays an image from my webcam? Currently, the image refreshes every 5 seconds, but I want it to stop after 30 seconds to avoid using too much bandwidth. Any suggestions on how I can achieve this? ...

jqueryfunctionrefreshwebcam