Internet Explorer 10.0.9200 seems to have a tendency to overlook CSS styles

Question

Internet Explorer 10.0.9200 seems to have a tendency to overlook CSS styles

In my web application, I have implemented a 'tab toolbar' with 3 tabs. When a user clicks on a tab, the page displays different data based on which tab is selected.

To visually indicate to the user which tab they have clicked on, I dynamically change its CSS class upon selection.

The selected tab undergoes the following changes: (1) it gets a yellowish background with a gradient effect; (2) the font size increases; (3) the width and height of the tab increase by approximately 6 pixels each.

Although this functionality works smoothly in Firefox, there are issues in IE 10.0.9200 specifically related to the background color and gradient of the selected tab. For example, when selecting tab #3 for the first time, everything appears as intended - the yellow gradient background along with the larger font and increased dimensions are applied.

However, in IE, there seems to be a problem where part of the 'selected' CSS class is not retained if a different tab is selected and then tab #3 is clicked again. Subsequent selections of tab #3 only show the font size and dimensions changes, but the colored background gradient is missing.

A simple solution is to reload the page in IE, after which the colored background gradient magically reappears.

Below is the CSS code for the 'selected' class:

 .selectedTabClass{
-moz-box-shadow:inset 0px 1px 0px 0px #fff6af;
-webkit-box-shadow:inset 0px 1px 0px 0px #fff6af;
box-shadow:inset 0px 1px 0px 0px #fff6af;
background:-webkit-gradient( linear, left top, left bottom,  
                  color-stop(0.05, #ffec64), color-stop(1, #ffab23) );
background:-moz-linear-gradient( center top, #ffec64 5%, #ffab23 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', 
               endColorstr='#ffab23');
background-color:#ffec64;
...
 }
 .selectedTabClass:hover {
background:-webkit-gradient( linear, left top, left bottom, 
              color-stop(0.05, #ffab23), color-stop(1, #ffec64) );
background:-moz-linear-gradient( center top, #ffab23 5%, #ffec64 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', 
              endColorstr='#ffec64');
background-color:#ffab23;

 }
 .selectedTabClass:active {
position:relative;
top:1px;
 }

This is how the HTML looks like:

 <label class="selectedTabClass" id="tab3"
         onclick="handleTabSelect(3, this)">this is Tab #3</label>

And here is the corresponding Javascript function:

  function handleTabSelect(whichTab, thisOne)
  {
      document.getElementById(whichTab).className = "selectedTabClass";
  }

I am looking for a way to ensure consistent behavior across all browsers, including IE. Any suggestions on how to achieve this would be greatly appreciated.

javascript html css internet-explorer-10

Answer 1

Answer №1

Greetings! Here is the JavaScript code equivalent to the jQuery code that was previously shared:

function checkClass(element, className) {
  return element.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
}

function addCustomClass(element, className) {
  if (!checkClass(element, className)) 
    element.className += " " + className;
}

function removeCustomClass(element, className) {
  if (checkClass(element, className)) {
      var regex = new RegExp('(\\s|^)' + className + '(\\s|$)');
      element.className = element.className.replace(regex, ' ');
  }
}

In this code, 'element' represents the ID and 'className' refers to the class name. Make sure to test it and let me know if any adjustments are needed.

function handleTabSelection(tabId, selectedTab)
{
     var targetElement = document.getElementById(tabId);
addCustomClass(targetElement, "active-tab");
// or
removeCustomClass(targetElement, "active-tab");
}

Answer 2

Greetings! Here is the JavaScript code equivalent to the jQuery code that was previously shared:

function checkClass(element, className) {
  return element.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
}

function addCustomClass(element, className) {
  if (!checkClass(element, className)) 
    element.className += " " + className;
}

function removeCustomClass(element, className) {
  if (checkClass(element, className)) {
      var regex = new RegExp('(\\s|^)' + className + '(\\s|$)');
      element.className = element.className.replace(regex, ' ');
  }
}

In this code, 'element' represents the ID and 'className' refers to the class name. Make sure to test it and let me know if any adjustments are needed.

function handleTabSelection(tabId, selectedTab)
{
     var targetElement = document.getElementById(tabId);
addCustomClass(targetElement, "active-tab");
// or
removeCustomClass(targetElement, "active-tab");
}

Answer 3

Answer №2

Although I managed to resolve the issue at hand, the underlying cause remains somewhat elusive to me. While I was able to fix it, I can't quite pinpoint why it was 'broken' in the first place.

The issue with certain CSS styles missing on our website only seemed to occur when using IE 10.0.9200 while accessing the site through our hosting provider. Interestingly, this problem did not arise when accessing the website locally on our in-house development server using the same browser version.

One key aspect of our website involves dynamically changing the CSS "className" for a tabbed toolbar to indicate which tab is currently selected. Each tab corresponds to a 'label' html element.

The tabs undergo two types of CSS changes:
(1) In our javascript, we have a line of code document.getElementById('tab3').style.backgroundColor = "white"
(2) Following that, under specific conditions, we change the class name of the tab like so: document.getElementById('tab1').className = "showThisTabIsSelectedCssClass";

In both Firefox and IE 10.0.9200 when running on our local servers, altering the 'className' appeared to erase or reset the style.backgroundColor change we implemented just before modifying the CSS 'className' for the tab elements.

A similar behavior was observed in Firefox as well (resetting the style.backgroundColor change upon resetting the 'className') when accessing our website online.

However, oddly enough, IE 10.0.9200 did not discard the style.backgroundColor="white" alteration even after the className was changed. Despite switching to a new CSS class with a blue backgroundColor for the tabs, the white background from the previous change remained intact.

The reason why IE 10.0.9200 only displayed this issue when viewing our hosted website online and not on our local development machines eludes me.

To rectify this, we had to strategically avoid the line of code style.backgroundColor="white" by determining earlier in the code that we would ultimately be changing the tab element's CSS className.

In essence, IE 10.0.9200 was maintaining a style.backgroundColor="white" setting even after the 'className' for the element was altered, despite the fact that the new CSS class introduced its own backgroundColor.

Answer 4